Discussion :

[tecap]

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.

[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,

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

[tecap]

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

Code :

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

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 ?

[SpaceFrog]

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

[tecap]

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

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