Discussion :

[stoner]

Bonsoir à tous ,

Je rencontre quelques problèmes à la réalisation d'un drag and drop sur une div spécifique.
Voici mon code js:

Code :

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
(function dragDrop() {
	var element = document.querySelector('.draggableBox');
	var inTheBox;
 
	element.addEventListener('mousedown', function() {
		inTheBox = true;
	}, false)
 
	element.addEventListener('mouseup', function() {
		inTheBox = false;
	}, false)
 
	document.onmousemove = function(e) {	
		if(inTheBox) {
			element.style.left = e.clientX - (e.clientX - element.offsetLeft) +"px";
			element.style.top = e.clientY - (e.clientY - element.offsetTop) +"px";
		}
	}
})();

Voilà la page pour visualiser ce qu'il se passe: http://jsfiddle.net/rJe3n/

Hélas je ne parviens pas à comprendre pourquoi ça ne fonctionne pas.
Si quelqu'un pouvait m'aider à comprendre ce qui cloche je lui en serait très reconnaissant !
Merci de votre aide.

[Crackerz]

Bonjour,

Plusieurs petites choses ne vont pas dans votre code.

1.La méthode querySelector() vous retourne le premier noeud du DOM dont la class est draggableBox. Cependant celui-ci est recouvert pas le div 2 qui lui même est recouvert par le div 3 ce qui vous empêche de vraiment tester ce qui ne vas pas dans votre code. Afin de faciliter la compréhension nous allons procédé avec un unique draggableBox.

Code :

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

<div class="draggableBox">1</div>

2.L’événement mousedown ne fait qu'en partie ce que vous attendez de lui, il vous faut récupérer les coordonnées de la souris sur l'élément que vous déplacez et faire la différence avec les coordonnées de l’élément qu'on s'apprête à déplacer.

Code :

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

1
2
3
4
5
element.addEventListener('mousedown', function(e) {
element.x = e.clientX - element.offsetLeft;
element.y = e.clientY - element.offsetTop;
inTheBox = true;
}, false)

L'événement mousemove ce sert d'un coordonnée préalablement calculé :

Code :

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

1
2
3
4
5
6
document.onmousemove = function(e) {
            if(inTheBox) {
                element.style.left = e.clientX - element.x +"px";
                element.style.top = e.clientY - element.y +"px";
            }
        }

Normalement si je n'ai pas fais d'erreur inattention cela devrait fonctionné à vous de me dire.
Dans votre cas initial qui s’agissait de pourvoir déplacer trois div sachez que la méthode querySelectorAll() retourne un Array composé de tous les éléments répondant à la recherche CSS (donc vos 3 div )
Pour l'objet Event que vous utilisez dans vos fonctions anonyme il existe une propriété target qui vous permet de récupéré la référence de l'élément sur lequel l'événement à été appeler (surement utile dans le cas de plusieurs div déplaçable).

[stoner]

Merci de votre aide!

J'ai donc fait évolué mon code:

Code :

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
(function dragDrop() {
	var element = document.querySelectorAll('.draggableBox');
	var inTheBox = false, box; // Ne fonctionne pas si je mets box { };
 
	document.addEventListener('mousedown', function(e) {
 
		for(var i = 0; i < element.length && e.target != element[i]; ++i)
			box = element[i];
		if(i < element.length) {
			box.x = e.clientX - box.offsetLeft;
			box.y = e.clientY - box.offsetTop;	
			inTheBox = true;
		}
	}, false);
 
	// Semble ne pas reconnaître l'objet box.
	box.addEventListener('mouseup', function() {
		alert("test");
		inTheBox = false;
	}, false);
 
	document.addEventListener('onmousemove', function(e) {	
		if(inTheBox) {
			box.style.left = e.clientX - box.x + "px";
			box.style.top = e.clientY - box.y + "px";
		}
	}, false);
})();

Prévisualisation du problème ici: http://jsfiddle.net/z99Ay/1/

Je ne comprends pas pourquoi la fonction mouseup n'est pas prise en compte.

Veuillez excuser l'abandon temporaire du post mais j'ai été exceptionnellement éloigné de mon PC.

[NoSmoking]

Bonjour,
dans ton code

Code :

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

1
2
3
4
5
	// Semble ne pas reconnaître l'objet box.
	box.addEventListener('mouseup', function() {
		alert("test");
		inTheBox = false;
	}, false);

pose toi la question de ce que vaut box au moment de l'ajout de l'événement.

[stoner]

Bonjour et merci de votre aide!

Il me semble que box vaut element[i] au moment de l'event. Soit le noeud-élément que je souhaite déplacer non ?

[NoSmoking]

Il me semble que box vaut element[i] au moment de l'event.

OUI

Soit le noeud-élément que je souhaite déplacer non ?

NON en fait i valant à ce moment là element.length, element[i] n'existe donc pas.

Tu devrais affecter l'événement dans la boucle

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function dragDrop() {
  var element = document.querySelectorAll('.draggableBox');
  var inTheBox = false,
      box; 
 
  for (var i = 0; i < element.length; i++) {
    box = element[i];
    box.addEventListener('mouseup', function () {
      alert("test");
      inTheBox = false;
    }, false);
  }
}

[Bovino]

C'est d'ailleurs expliqué dans la ...

[stoner]

Ok super, merci à vous, je n'avais pas du tout compris le principe en fait.
Je dépose un de mes codes test si ça peut aider quelqu'un.

A bientôt!

Code :

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
(function dragDrop() {
	var element = document.querySelectorAll('.draggableBox');
	var inTheBox = false, box;
 
	document.addEventListener('mouseup', function() {
		inTheBox = false;
	}, false);
 
	document.addEventListener('mousedown', function(e) {
		var i;
		for(i = 0; i < element.length && e.target != element[i]; ++i);		
		if(i < element.length) {
			box = element[i];
			box.x = e.clientX - box.offsetLeft;
			box.y = e.clientY - box.offsetTop;	
			inTheBox = true
		}
	}, false);
 
	document.addEventListener('mousemove', function(e) {	
		if(inTheBox) {
			box.style.left = e.clientX - box.x + "px";
			box.style.top = e.clientY - box.y + "px";
		}
	}, false);
})();

[NoSmoking]

dans ta fonction

Code :

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

1
2
3
4
5
6
7
8
9
10
function (e) {
  var i;
  for (i = 0; i < element.length && e.target != element[i]; ++i);
  if (i < element.length) {  // INUTILE
    box = element[i];
    box.x = e.clientX - box.offsetLeft;
    box.y = e.clientY - box.offsetTop;
    inTheBox = true
  }
}

le test if (i < element.length) est inutile puisse que condition de sortie de la boucle for (i = 0; i < element.length.