Comportement anarchique d'un input type range inclus dans un formulaire draggable

**laurent.t** · 06/05/2015, 15h08

Bonjour !
Dans le but de réaliser un tableau de bord déplaçable, j'ai rencontré ce problème :
Lorsqu'un curseur HTML (input type=range) est encapsulé dans un formulaire draggable, le comportement du curseur devient anarchique : le curseur ne fonctionne pas et provoque un drag du formulaire si le bouton gauche de la souris est enfoncé tandis qu'il suit les mouvements de la souris si bouton gauche n'est pas enfoncé !

Comment faire pour qu'il garde un comportement normal tout en étant inclus dans un élément draggable ?
Remarques : Testé sur Opera, Chrome et Firefox. Le fait de rendre le curseur non draggable ne change rien.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<form draggable="true" >
    déplacez-moi !
    <input  type="range"  />
</form>

**NoSmoking** · 08/05/2015, 12h36

Bonjour,
contourne le comportement normal de ton INPUT en mettant une zone de préhension pour le drag sur ton formulaire, l'autre solution serait de gérer cela dans les méthodes startDrag ou autres.

**laurent.t** · 11/05/2015, 20h08

Bonsoir !
En attendant une réponse, j'avais opté pour la première solution. Tu me confirmes donc qu'il s'agit ici d'une faille de conception des moteurs de rendu. A qui faut-il s'adresser pour signaler ce genre de problème ?

**NoSmoking** · 12/05/2015, 00h04

Tu me confirmes donc qu'il s'agit ici d'une faille de conception des moteurs de rendu.

Non pas du tout, HTML5 mets à ta disposition une opportunité/facilité de déplacement des éléments dans un document mais c'est à toi de gérer l'interaction que tu souhaites sur le déplacement via javascript.

Les input type="range" s’appuient sur le drag pour modifier leur valeur d'accord, mais les événements se propageant son parent reçoit également ces événements sauf si on les bloque ce qui n'est pas forcément judicieux dans certains cas.

Le dragstart se déclenche après un mousedown, une solution consiste à utiliser un flag d'activation afin de savoir qui a reçu l'information en premier et d'autoriser la suite ou non.

En gros

mousedown sur INPUT on ne fera pas de déplacement (nota: l'élément parent, la FORM, reçoit également l'événement)
mousedown sur FORM le déplacement est autorisé

comme le parent reçoit l'événement c'est sur celui ci qu'il faut mettre le test par exemple

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
// récup. de l'élément FORM
var oElem = document.querySelectorAll('form')[0];
// mise en place d'un flag
oElem.actif = true;  // par défaut
// test si clic sur élément lui même ou sur enfant
oElem.addEventListener( 'mousedown', function(e) {
    // récup. élément déclencheur
    var oTarget = e.target || e.srcElement;
    this.actif = oTarget == this;
  }, false);

et sur l'événement dragstart il suffit de tester et d'agir en conséquence

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
oElem.addEventListener( 'dragstart', function(e) {
    if (this.actif) {
        // par exemple
        e.dataTransfer.setData('Text', this.id);
    } else {
        // annule action par défaut
        e.preventDefault();
    }
  }, false);

voilà pour le principe

Pour finir un exemple complet minimum de déplacement d'un élément sur une page

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Draggable input type="range"</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  padding:0;
  margin:1em;
  font:1em/1.25em Verdana, Arial, sans-serif;
  background:#FFF;
}
form {
  position:absolute;
  margin:0;
  padding:1em;
  left:5em;
  top:5em;
  border:1px solid #abc;
  background:#eef;
  box-shadow: 2px 2px 5px #ccc;
  width:20em;
}
form.over{
  background:#eee;
  box-shadow: 0px 0px 0px #888;
  opacity:0.5;
}
form:hover{
  border:1px dashed #abc;
  cursor: move;
}
input[type="range"]{
  cursor:pointer;
}
</style>
</head>
<body>
<h1>Draggable <code>input type="range"</code></h1>
<form draggable="true">
    déplacez-moi !
    <input type="range">
</form>
 
<script>
// récup. de l'élément FORM
var oElem = document.querySelectorAll('form')[0];
// mise en place d'un flag
oElem.actif = true;
// test si clic sur élément lui même ou sur enfant
oElem.addEventListener( 'mousedown', function(e) {
    // récup. élément déclencheur
    var oTarget = e.target || e.srcElement;
    this.actif = oTarget == this;
  }, false);
// affecte l'événement minimum
oElem.addEventListener( 'dragstart', function(e) {
    if (this.actif) {
        this.classList.toggle('over');
        // positions de départ de l'élément
        this.posDrag = {
          dX : e.screenX,
          dY : e.screenY,
          oX : this.offsetLeft,
          oY : this.offsetTop
        };
        // par exemple
        e.dataTransfer.setData('Text', this.id);
    } else {
        // annule action par défaut
        e.preventDefault();
    }
  }, false);
// retour à la normale
oElem.addEventListener( 'dragend', function(e) {
    this.classList.toggle('over');
    // positionne l'élément à sa nouvelle place
    this.style.left = (this.posDrag.oX +(e.screenX -this.posDrag.dX)) +'px',
    this.style.top  = (this.posDrag.oY +(e.screenY -this.posDrag.dY)) +'px';
  }, false);
</script>
</body>
</html>

A qui faut-il s'adresser pour signaler ce genre de problème ?

Je ne vois pas où est le problème

**laurent.t** · 12/05/2015, 21h58

super c'est exactement ce que je voulais faire
merci infiniment

Comportement anarchique d'un input type range inclus dans un formulaire draggable [CSS 3]

CSS

Discussions similaires

Partager

Partager