Déplacement div dans div conteneur

Version imprimable

10/10/2007, 11h50
tecap

Déplacement div dans div conteneur

Bonjour,
J'ai eu beau chercher, je n'ai pas trouvé de script me premettant de faire un drag and drop d'un div contenu dans un div pour le placer dans un autre div conteneur (en vérifiant qu'il est bien dans le div au onmouseup, sinon on le remet à la position initiale).
Si vous savez où je peux trouver un script qui fait ça (je suis débutante) ou si vous avez des indications, merci d'avance.
10/10/2007, 12h06
Smiff

Aucune idée d'où tu peux trouver un script comme ça mais c'est normallement conçu en Ajax donc va falloir bosser ça ;)

Visite le site de voilà et regarde éventuellement les sources.

Bon courage,
10/10/2007, 12h20
SpaceFrog

ben n'importe quel script de drag and drop, ensuite faut juste repérer les coordonnées du drop à savoir dasn quel conteneur ça tombe, ensuite un simple appendChild dans le conteneur de destiantion.

j'ai un seul conteneur de destination "conteneur" et j'ai inséré appendChild :
Code:

1 2 3 4 5 6 7 8 9 10 function drop(){ var conteneur=document.getElementById("conteneur"); conteneur.appendChild( myObjectClick ); myObjectClick = null; movable = false; positionXAtClick = null; positionYAtClick = null; positionXMyobjectClick = null; positionYMyobjectClick = null; }
myObjectClick est l'objet dragué. Mais rien ne se passe... Quel est le problème ? Pourquoi est-ce que mon div ne s'insère pas dans le div conteneur ?

10/10/2007, 15h56
SpaceFrog

et ou tu lui dis ce qu'est myObjectClick ?
tu ne le passes même pas en paramètre de la fonction ?

Il est en variable globale. Si je donne tout mon code, ce sera peut-pêtre plus clair :

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
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
85
86
87
88
  var classMove = "drag";
 var myObjectClick = null;
 var movable = false;
 var positionXAtClick = null;
 var positionYAtClick = null;
 var positionXMyobjectClick = null;
 var positionYMyobjectClick = null;
 
 //Fonction permettant d'initialiser les listeners
 function init_evenement(){
 //On commence par affecter une fonction à chaque évènement de la souris
	 if(window.attachEvent){
	 document.onmousedown = start;
	 document.onmousemove = drag;
         document.onmouseup = drop;
	 }
	 else{
	 document.addEventListener("mousedown",start, false);
	 document.addEventListener("mousemove",drag, false);
	 document.addEventListener("mouseup",drop, false);
	 }
 }
 
 //Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
 function start(e){
 //On initialise l'évènement s'il n'a aps été créé ( sous ie )
 if(!e){
 e = window.event;
 }
 //Détection de l'élément sur lequel on a clické
 monElement = (e.target)? e.target:e.srcElement;
 
  if(monElement) {
	 //On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
	 getClassDrag(monElement);
	 if(myObjectClick){
		 positionXAtClick = e.clientX;
		 positionYAtClick = e.clientY;
		 positionXMyobjectClick = parseInt(myObjectClick.offsetLeft);
		 positionYMyobjectClick = parseInt(myObjectClick.offsetTop);
		 return false;
		 }
	 }
 }
 
 function drag(e){
 
 //On initialise l'évènement s'il n'a aps été créé ( sous ie )
 if(!e){
 e = window.event;
 }
 
 //Si l'objet est déplaçable et qu'il existe
 if(movable && myObjectClick){
	 myObjectClick.style.position = "absolute" ;
	 //On récupère la position de la souris par rapport à l'objet
	 myObjectClick.style.left = e.clientX + ( positionXMyobjectClick - positionXAtClick ) + "px";
	 myObjectClick.style.top = e.clientY + ( positionYMyobjectClick - positionYAtClick ) + "px";
	}
}
 
 function drop(){
var conteneur=document.getElementById("conteneur");
 
if (myObjectClick && conteneur){
conteneur.appendChild(myObjectClick); 
}
 myObjectClick = null;
 movable = false;
 positionXAtClick = null;
 positionYAtClick = null;
 positionXMyobjectClick = null;
 positionYMyobjectClick = null;
 }
 
function getClassDrag(myObject){
 with(myObject){
	 var x = className;
	 listeClass = x.split(" ");
	 //On parcours le tableau pour voir si l'objet est déplaçable
	 for(var i = 0 ; i < listeClass.length ; i++){
		 if(listeClass[i] == classMove){
			 movable = true;
			 myObjectClick = myObject;
			}
		}
	}
 }

j'ai pas le temps d'approfondir, essaye de voir ce que te retourne un alert de l'objet ...
Code:

1 2 3 4 5 function drop(){ var conteneur=document.getElementById("conteneur"); conteneur.appendChild( myObjectClick ); alert(myObjectClick); // ou alert (myObjetc.clikc.id) ou type ... myObjectClick = null;

10/10/2007, 18h06
tecap
J'ai modifié le code de la façon suivante
Code:

1 2 3 4 5 function drop(){ var conteneur=document.getElementById('conteneur'); if (monElement&& conteneur){ conteneur.appendChild(monElement); }
en remplaçant donc l'objet myObjectClick par monElement (mis en variable globale). Je me suis dit que c'était l'élément détecté au clic de la souris qu'il fallait mettre en paramètre et non l'objet javascript. Mais j'ai maintenant une erreur que je ne comprends pas :
"Node cannot be inserted at the specified point in the hierarchy" code: "3

Je sais que c'est pas évident de se mettre dans le code et ça demande un peu de temps mais j'ai vraiment besoin de trouver une solution et je viens de passer une aprem là-dessus!
Merci à ceux qui aurait une idée !

un gros LOL ...
Je suis l'auteur de cette source, que tu as surement trouvé sur un autre site de partage de source sur lequel tu aurais pu me demander ;)

Si j'ai bien compris tu souhaitais pouvoir déplacer des éléments d'une liste vers l'autre ...
voici un exemple en reprenant ma source, j'ai implémenté 2 nouvelles fonctions :

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
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>classe d'élement déplaçable</title>
<style type="text/css">
.boiteBleu{
	padding:5px;
	background-color:#FFEEBF;
	width:120px;
	position:relative;
}
.boiteBleu li{
	background-color:#C1D8E8;
	width:120px;
	border:1px solid #ccc;
	list-style:none;
	margin-bottom:5px;
}
.boiterouge{
	background-color:red;
	width:150px;
	height:150px;
}
 
.liTemp{
	background-color:#ffffff;
	width:120px;
	border:1px dashed #F1CEC5;
	list-style:none;
	margin-bottom:5px;
}
 
.drag{
border:2px dashed #F1CEC5;
cursor:move;
}
</style>
<script type="text/javascript">
/*######################################
script permettant de rendre déplaçable
les éléments qui ont la classe définit
en paramètre
######################################*/
 
var classMove = "drag";
var myObjectClick = null;
var movable = false;
var positionXAtClick = null;
var positionYAtClick = null;
var positionXMyobjectClick = null;
var positionYMyobjectClick = null;
 
//Fonction permettant d'initialiser les listeners
function init_evenement(){
//On commence par affecter une fonction à chaque évènement de la souris
if(window.attachEvent){
	document.onmousedown = start;
	document.onmousemove = drag;
	document.onmouseup = drop;
}
else{
	document.addEventListener("mousedown",start, false);
	document.addEventListener("mousemove",drag, false);
	document.addEventListener("mouseup",drop, false);
}
 
 
 
}
 
//Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
function start(e){
	//On initialise l'évènement s'il n'a aps été créé ( sous ie )
	if(!e){
		e = window.event;
	}
	//Détection de l'élément sur lequel on a clické
	monElement = (e.target)? e.target:e.srcElement;
	//alert(monElement.nodeName);
	if(monElement)
	{
	//On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
		getClassDrag(monElement);
		if(myObjectClick){
			positionXAtClick = e.clientX;
			positionYAtClick = e.clientY;
			positionXMyobjectClick = parseInt(myObjectClick.offsetLeft);
			positionYMyobjectClick = parseInt(myObjectClick.offsetTop);
			return false;
		}
	}
}
 
function drag(e){
	//On initialise l'évènement s'il n'a aps été créé ( sous ie )
	if(!e){
		e = window.event;
	}
 
	//Si l'objet est déplaçable et qu'il existe
	if(movable && myObjectClick){
		myObjectClick.style.position = "absolute" ;
		//On récupère la position de la souris par rapport à l'objet
		myObjectClick.style.left = e.clientX + ( positionXMyobjectClick - positionXAtClick ) + "px";
		myObjectClick.style.top = e.clientY + ( positionYMyobjectClick - positionYAtClick ) + "px";
		monElementTemp = (e.target)? e.target:e.srcElement;
		return false;
	}
 
}
 
function drop(){
	positionYElemDest = parseInt(document.getElementById('info').offsetTop);
	positionXElemDest = parseInt(document.getElementById('info').offsetLeft);
 
	//Dans ce cas le figure le parent de l'element étant en position relative, il faut ajouter sa marge a lui également donc :
	positionXRelle = parseInt(myObjectClick.parentNode.offsetLeft)+parseInt(myObjectClick.style.left);
	positionYRelle = parseInt(myObjectClick.parentNode.offsetTop)+ parseInt(myObjectClick.style.top);
 
	if(positionXRelle > positionXElemDest && positionYRelle > positionYElemDest){
 
		var objDest = document.getElementById('info');
		createLiTemp(objDest);
		destroyElement(myObjectClick);
	}
 
	myObjectClick = null;
	movable = false;
	positionXAtClick = null;
	positionYAtClick = null;
	positionXMyobjectClick = null;
	positionYMyobjectClick = null;	
 
 
	//monElement = (e.target)? e.target:e.srcElement;
}
 
function getClassDrag(myObject){
	with(myObject){
		var x = className;
		listeClass = x.split(" ");
		//On parcours le tableau pour voir si l'objet est déplaçable
		for(var i = 0 ; i < listeClass.length ; i++){
			if(listeClass[i] == classMove){
				movable = true;
				myObjectClick = myObject;
			}
		}
	}
}
 
function createLiTemp(objToInsert){
			var obj=document.createElement('li');
			obj.setAttribute("id","li_temp");
			obj.setAttribute("class","liTemp");
			obj.setAttribute("className","liTemp");
			//et la rapidos au lieu d'un texte node .. ()-:-)
			obj.innerHTML = "nouvelle";
			objToInsert.appendChild(obj);
}
 
function destroyElement(objToDestroy){
	//récupération du parent 
	var parentDuLi = objToDestroy.parentNode;
	parentDuLi.removeChild(objToDestroy);
}
window.onload = init_evenement;
</script>
 
</head>
 
<body>
<ul class="boiteBleu">
	<li class="drag">Alpha</li>
	<li>Beta</li>
	<li>Gama</li>
	<li>Teta</li>
</ul>
 
<ul id="info" style="position:absolute;top:10px;right:0px;border:1px solid #666;width:200px;height:40px;">
</ul>
</body>
</html>

Coordialement ;)