Drag and drop

Version imprimable

Drag and drop

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:

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. :roll:
Si quelqu'un pouvait m'aider à comprendre ce qui cloche je lui en serait très reconnaissant !
Merci de votre aide.

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:

<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:

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:

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).

Merci de votre aide!

J'ai donc fait évolué mon code:

Code:

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. :oops:

Bonjour,
dans ton code
Code:

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.

11/04/2014, 15h00
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 ?

Citation:

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

OUI

Citation:

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:

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); } }

12/04/2014, 11h05
Bovino

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

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

A bientôt!

Code:

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);
})();

dans ta fonction
Code:

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.