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