Drag and drop avec retour

Version imprimable

17/02/2009, 12h39
gandalf76fr

Drag and drop avec retour

Bonjour,

malgré ce titre peu explicite, je vais tacher d'être un brin plus clair.

Dans le cadre du développement d'une application intranet de gestion de flux de patients, je vais avoir besoin de faire du glisser / déposer (drag and drop).

Jusque la rien de bien compliqué, en effet après recherche et tests, j'y parviens.

Mais cette application aura plusieurs divs : Attente, IAO, Radio, Labo, Med qui me permettront de situer les patients qui seront dans des listes elles mêmes dans ces divs.
Sauf que bien évidement quand le patient sera revenu de radio, il me faut le repasser en attente.
Or sur tout ce que j'ai trouver sur le drag and drop avec script.aculos.us, je ne trouve pas le moyen de transformer une zone de drop en zone de drag et vise versa.

Car si de glisse le patient de l'attente (zone de drag) vers la radio (zone de drop) quand je veux le remettre dans l'attente, la zone de radio doit devenir un drag et la zone d'attente un drop.

C'est ça que je ne trouve pas comment faire.

Auriez vous des pistes à me donner svp ?

merci d'avance.
17/02/2009, 20h09
gwyohm

Non : c'est le patient que tu drag ; jamais la zone d'attente (ou alors j'ai rien compris)... Les Droppables sont les zones dans lesquelles se trouvent les patients (radio, labo, iao... ) les patients sont eux des Draggable.
17/02/2009, 22h06
gandalf76fr

Oui, en effet on est d'accord c'est le patient que je drag.

Depuis la liste d'attente vers les droppables zones (radio, labo, iao...) mais je dois aussi pouvoir le remettre dans la file d'attente qui devient alors une droppable zone.

Genre le patient est inscrit, il entre en file d'attente, il passe à l'IAO puis il va à la radio, puis il retourne en file d'attente.

C'est le problème des zones qui peuvent tantôt être draggables tantôt droppables.

je ne sais pas si je suis clair en fait.
17/02/2009, 22h16
Bovino

:nono:
les draggables sont les éléments à déplacer, les droppables sont les zones où déplacer.
Donc ton patient est un draggable, l'attente est droppable ;)
18/02/2009, 08h50
gandalf76fr

Ok, merci beaucoup pour cette info que je n'avais pas saisie.

je vais tacher de faire un essai à partir des éléments que j'ai trouver sur le net.

Mais en gros, ça va être si j'ai bien compris :
- li => draggables
- ul (ou div) je ne sais lequel des 2 passera => droppables.

Je fais l'essai dès que possible et je vous tiens au courant.
Merci encore.

je sais que cela ne rentre pas dans la catégorie des frameworks mais essaye ceci :

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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.Draggable{
    border:1px solid #666;
    background-color:#4C9294;
}
.inDrag{
    border:2px dashed #ED3C12;
    background-color:#4395BC;
}
</style>
<script type="text/javascript">
			var x1 = 0;
			var y1 = 0;
			var accx = new Array ;
var accy = new Array ;
var pixel = new Array;
 
var Drag = {
 
    MyObj : null,
    MyObjToLimit : null,
 
    init : function(o,MyObjToLimit)
    {
        Drag.MyObj = o ;
        //Sauvegarde de la classe d'origine de l'objet
        Drag.MyObj.MyClassName = o.className;
        //On vérifit si l'objet est limité a un autre objet
        Drag.MyObj.MyObjToLimit = (MyObjToLimit != null) ? MyObjToLimit:null;
        //On assigne la méthode au click de la souris sur l'MyObjet
        Drag.MyObj.onmousedown    = Drag.start;
 
        //Si l'élément n'as pas de propriété let et top on lui en assigne par défault
        if (isNaN(parseInt(Drag.MyObj.style.left  ))) Drag.MyObj.style.left   = "0px";
        if (isNaN(parseInt(Drag.MyObj.style.top   ))) Drag.MyObj.style.top    = "0px";
 
        //Si l'on doit limiter le déplacement a une zone on calcul les points
        if(Drag.MyObj.MyObjToLimit){
                Drag.MyObj.minLeft = 0;
                Drag.MyObj.maxRight = Drag.MyObj.minLeft + Drag.MyObj.MyObjToLimit.offsetWidth ;
                Drag.MyObj.minTop = 0;
                Drag.MyObj.maxBottom = Drag.MyObj.minTop+Drag.MyObj.MyObjToLimit.offsetHeight;
        }
 
    },
 
    start : function(e)
    {
        Drag.MyObj = this;
        //On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
        e = Drag.GetEvent(e);
        //On affecte la classe InDrag
        Drag.MyObj.className = "inDrag";
        //On récupère l'endroit ou se trouve la souris par rapport a l'objet clické
        Drag.MyObj.ecartX = e.clientX - parseInt(Drag.MyObj.style.left);
        Drag.MyObj.ecartY = e.clientY - parseInt(Drag.MyObj.style.top);
 
		Drag.MyObj.initX = parseInt(Drag.MyObj.style.left);
        Drag.MyObj.initY = parseInt(Drag.MyObj.style.top);
        //On affecte les méthodes drag et end au évènement lié au document et non a l'MyObjet
        document.onmousemove    = Drag.drag;
        document.onmouseup        = Drag.end;
 
        return false;
    },
 
    drag : function(e)
    {
        //On récupère l'évènement , bug sous ie on doit redéclarer l'évènement
        e = Drag.GetEvent(e);
        //Récupération de la position de la souris
        var curX = e.clientX;
        var curY = e.clientY;
 
        var newPosX = curX - Drag.MyObj.ecartX;
        var newPosY = curY - Drag.MyObj.ecartY;
 
        //Si l'élément les limités a  un conteneur
        if(Drag.MyObj.MyObjToLimit != null){
 
            //Déplacement de l'objet
            if(newPosX < (Drag.MyObj.minLeft+5)){
                Drag.MyObj.style.left = Drag.MyObj.minLeft+5 + "px";
            }
            else if((newPosX + Drag.MyObj.offsetWidth) > (Drag.MyObj.maxRight-5)){
                Drag.MyObj.style.left = Drag.MyObj.maxRight - Drag.MyObj.offsetWidth - 5 + "px";
            }
            else{
                Drag.MyObj.style.left = newPosX + 'px';
            }
 
 
            if(newPosY < (Drag.MyObj.minTop+5)){
                Drag.MyObj.style.top = Drag.MyObj.minTop + 5 + 'px';
            }
            else if((newPosY + Drag.MyObj.offsetHeight) > (Drag.MyObj.maxBottom-5)){
                Drag.MyObj.style.top = Drag.MyObj.maxBottom - Drag.MyObj.offsetHeight - 5 +"px";
            }
            else{
                Drag.MyObj.style.top = newPosY + 'px';
            }
        }
        //Sinon déplacement normalement
        else{
            Drag.MyObj.style.top = newPosY + 'px';
            Drag.MyObj.style.left = newPosX + 'px';
        }
 
        return false;
    },
 
    end : function()
    {
        //On remet la classe de l'objet
        Drag.MyObj.className = Drag.MyObj.MyClassName;
        //On supprime les évènements liés au déplacement :)
        document.onmousemove = null;
        document.onmouseup   = null;
		//On remet l'objet a sa place d'origine
		document.getElementById('retour').innerHTML = "depart x : " + parseInt(Drag.MyObj.style.left) + "depart Y : " + parseInt(Drag.MyObj.style.top)+" arrivée X" + Drag.MyObj.initX +" arrivé Y :" + Drag.MyObj.initY;
		line(parseInt(Drag.MyObj.style.left), parseInt(Drag.MyObj.style.top), Drag.MyObj.initX, Drag.MyObj.initY);
        //On détruit l'MyObjet
        Drag.MyObj = null;
    },
 
    GetEvent : function(e)
    {
        if (!e) e = window.event;
        return e;
    },
    findPos : function(obj){
        //position x / y de l'objet
        var x = obj.offsetLeft || 0;
        var y = obj.offsetTop || 0;
        //tant qu'il y a un parent, on ajoute la position de son parent
        while (obj = obj.offsetParent) {
            x += obj.offsetLeft
            y += obj.offsetTop
        }
        //Ici on retour x ou y ( ou les deux dans un tableau ou un hash
        return new Array(x,y);
    }
};
 
 
 
 
 
 
function line(xi,yi,xf,yf) {
accx = new Array;
accy = new Array;
x1 = 0;
y1 = 0;
var dx,dy,i,xinc,yinc,cumul,x,y = 0;
x = xi ;
y = yi ;
dx = xf - xi ;
dy = yf - yi ;
xinc = ( dx > 0 ) ? 1 : -1 ;
yinc = ( dy > 0 ) ? 1 : -1 ;
dx = Math.abs(dx) ;
dy = Math.abs(dy) ;
accx.push(x);
accy.push(y);
if ( dx > dy ) {
  cumul = dx / 2 ;
  for ( i = 1 ; i <= dx ; i++ ) {
    x += xinc ;
    cumul += dy ;
    if (cumul >= dx) {
      cumul -= dx ;
      y += yinc ; }
    accx.push(x);
	accy.push(y) ; } }
  else {
  cumul = dy / 2 ;
  for ( i = 1 ; i <= dy ; i++ ) {
    y += yinc ;
    cumul += dx ;
    if ( cumul >= dy ) {
      cumul -= dy ;
      x += xinc ; }
    accx.push(x);
	accy.push(y) ; } }
	go();
}
 
function moveDiv(x,y){
	document.getElementById('debug').style.top = y + "px";
	document.getElementById('debug').style.left = x + "px";
	//document.getElementById('debug').innerHTML += "X=%2d, Y=%2d\n" + x +" " +y+"<br />\n";
}
 
 
 
 
 
 
 
 
			function go(){
 
				moveDiv(accx[x1],accy[y1]);
				//createDiv(accx[x1],accy[y1]);
				x1 = x1+12;y1 = y1+12;	
 
				if( x1 < (accx.length) && y1 < (accy.length) ){
					setTimeout(function(){go()},10);
				}
				else{
					moveDiv(accx[accx.length-1],accy[accy.length-1]);
				}
			}
</script>
</head>
<body>
 
<div id="titi" style="width:500px;height:500px;border:1px solid #666;position:relative">
<div id="debug" style="width:50px;height:50px;position:absolute" class="Draggable"> ici
</div>
</div>
<div id="retour"></div>
 
<script type="text/javascript">
    Drag.init(document.getElementById('debug'),document.getElementById('titi'));
    //Drag.init(document.getElementById('test'));
</script>
</body>
</html>

il y aurait un peu de code a faire pour gèrer les drops :)

19/02/2009, 09h34
gandalf76fr

Bon désolé je n'ai pas encore eut le temps de m'y remettre.

Dès que je l'ai fait, je vous tiens informé de mes avancées (et des soucis qui viendront avec j'en suis sur).

En tout cas merci pour votre aide.

@le_chomeur : Merci pour ce code. N'étant pas du tout spé en javascript, je prefèrerai m'assister d'un framework histoire de simplifier le code javascript pour moi. Je vais donc en premier explorer la piste via Script.aculo.us. Si je n'y parviens pas je verrai pas ta méthode.
22/02/2009, 08h56
gandalf76fr

Bonjour,

j'ai mis une peu de temps à donner des nouvelles, mais j'ai à priori trouver la solution : en fait il ne faut pas utiliser le drag and drop mais le sortable.create.

J'avance dans le dev de ce que je veux faire.

Voici un petit début (très moche je sais) dans mes essais en cours : http://gandalf76fr.fr/test/test3.php

Il me reste pas mal de choses à faire, entre autre à l'associer à l'autocompleter que j'ai utiliser...

Peut être cela va il déboucher sur un tuto.

Merci à tous pour votre aide, je vous tiens informé si je bloque (ou pas...)

Bonjour,

je reviens vers vous suite à un léger soucis pour lier l'auto compléter à mes listes sortables :
L'autocompleter le donne une liste de personne, quand je clique sur un personne ça m'ajoute une personne dans le div attente :

Code:

<div id="nom_prenom" class="lineitem" style="position: relative;">nom prenom date de naissance (au format jj mm aaaa)</div>

j'obtiens ce résultat avec la fonction :
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 function patient(id,nom,prenom,ddn) { this.id = id; this.nom = nom; this.prenom = prenom; this.ddn = ddn; new Ajax.Updater( 'attente', 'test5.php', { method: 'post', parameters: {id: id,nom: nom, prenom: prenom, ddn: ddn}, insertion: Insertion.Bottom } ); Sortable.create( // nom du id de la liste 1 "attente", { // type de balise affecté - pourrait être aussi par ex. "ul" tag:"div", // permet de glisser un item d\'une boîte à l\'autre dropOnEmpty: true, // boîtes dans lesquelles les items peuvent être glissés containment: ["attente","iao","radio","labo","med"], // permet le mouvement hors des divs constraint:false, // Les items transférables ont comme nom de classe "lineitem" only:"lineitem" } ); }
Fonction appelée dans les li retournée par l'autocompleter :
Code:

1 2 <li id="nom_prenom_date de naissance" class="lineitem" onclick="patient('nom_prenom_date de naissance','nom','prenom','date de naissance')" style="position: relative;">
Le soucis c'est que avec des div sous cette même formule ça marche très bien : http://gandalf76fr.fr/test/test3.php

mais dans le script avec les éléments ajoutés par l'autocompleter ces éléments ne sont pas déplaçable.
Pas de message d'erreur (y compris avec firebug).

Des idées svp ?

Tu crées le sortable après avoir lancé ta requète AJAX, mais pas quand celle ci est terminée :

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
 
function patient(id,nom,prenom,ddn) {
	this.id = id;
	this.nom = nom;
	this.prenom = prenom;
	this.ddn = ddn;
	new Ajax.Updater(
		'attente',
		'test5.php',
		{
			method: 'post',
			parameters: {id: id,nom: nom, prenom: prenom, ddn: ddn},
			insertion: Insertion.Bottom,
                        onComplete: function() {
	                  Sortable.create(
                          // nom du id de la liste 1
    "attente",
    {
      // type de balise affecté - pourrait être aussi par ex. "ul"
      tag:"div",
 
      // permet de glisser un item d\'une boîte à l\'autre
      dropOnEmpty: true,
 
      // boîtes dans lesquelles les items peuvent être glissés
      containment: ["attente","iao","radio","labo","med"],
 
	  // permet le mouvement hors des divs
	  constraint:false,
 
      // Les items transférables ont comme nom de classe "lineitem"
      only:"lineitem"
    }
  );
                       }
		}
	);
 
}

28/02/2009, 12h43
gandalf76fr

Merci beaucoup pour cette réponse qui me parait être la bonne piste à suivre en effet.

Je vais étudier ça la semaine prochaine (le dev en cours étant sur l'intranet du boulot).

Je vous tiens informé.
04/03/2009, 09h14
gandalf76fr

Bonjour,

j'ai enfin eut le temps de tester, et ça fonctionne nickel.

Bon me reste plus qu'a adapter cette fonction et le php qui va avec pour entrer tout ça dans mysql et ça devrait rouler.

Je taguerai résolut une fois tout finit, et en cas de soucis je reviendrait vers vus.

En tous cas merci beaucoup pour votre aide.

arf après test et vérification, un soucis demeure :
quand j'ajoute un patient dans la liste attente, la fonction donnée précédement me le rend bien déplaçable vers les autres listes.

Par contre tout les patients présents dans les autres listes ne sont plus déplaçables :(

Faut il que sur le onupdate je lance le rafraichissement de toutes les listes ? Ou y à il un moyen que juste la liste attente soit rafraichie ?

merci d'avance de vos suggestions.

Cordialement.

edit : bon en ajoutant des sortable.create pour toutes les listes dans la fonction, ça marche mais je ne suis aps sur que cela soit optimal.
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 patient(id,nom,prenom,ddn) { this.id = id; this.nom = nom; this.prenom = prenom; this.ddn = ddn; new Ajax.Updater( 'attente', 'test5.php', { method: 'post', parameters: {id: id,nom: nom, prenom: prenom, ddn: ddn}, insertion: Insertion.Bottom, onComplete: function() { Sortable.create("attente",{tag:"div",dropOnEmpty: true,containment: ["attente","iao","radio","labo","med"],constraint:false,only:"lineitem"}); Sortable.create("iao",{tag:"div",dropOnEmpty: true,containment: ["attente","iao","radio","labo","med"],constraint:false,only:"lineitem"}); Sortable.create("radio",{tag:"div",dropOnEmpty: true,containment: ["attente","iao","radio","labo","med"],constraint:false,only:"lineitem"}); Sortable.create("labo",{tag:"div",dropOnEmpty: true,containment: ["attente","iao","radio","labo","med"],constraint:false,only:"lineitem"}); Sortable.create("med",{tag:"div",dropOnEmpty: true,containment: ["attente","iao","radio","labo","med"],constraint:false,only:"lineitem"}); } } ); }
edit 2 : Existe il une méthode qui permet de vider ce qu'il y a dans le input une fois un élément dans al liste cliqué ou faut il que je le dev dans ma fonction on update ?

09/03/2009, 15h25
gandalf76fr

Bonjour,

je reviens vers vous car je bloque sur un soucis :
j'ai donc mis en place et en forme mes listes et l'autocomplete.

Le patient s'ajoute bien sur les listes déplaçables dans les différentes listes.

Le soucis c'est que pour mon script je vais "loguer" ces déplacement.
En gros le patient est arrivé à tel heure (enregistrement de l'heure lors de l'arrivée en fil d'attente), il est passé à tel heure à l'iao (enregistrement de l'heure d'entrée à l'iao et en est ressortit à tel heure (enregistrement de sortie de l'iao), il à été envoyé en radio à telle heure, et en est revenu à tel heure (enregistrement de l'heure de d'envoi et de retour de radio) ........

Tout ça en déplaçant le patient dans les cases.

Ce que je pense faire : envoyer via ajax les infos en bdd mysql genre table venue, arrivée, iao, radio début, radio fin .....

Pas de soucis coté php ni ajax pour faire ça.

Ce que je ne trouve pas c'est l'événement déclencheur.

En gros comment en javascript ou via prototype lui dire de lancer tel action en cas d'ajout d'un élément dans une liste et telle autre action en cas de retrait d'un élément d'une liste.

J'ai bien tenté avec l'événement onchange mais il me sors plein de fois l'id de l'élément déplacé ce qui rend la page très instable.

Et onupdate ne me donne que l'id du container pas celui de l'élément déplacé.

Si quelqu'un à une idée, merci d'avance de vos lumières.
09/03/2009, 19h15
gwyohm

Il me semble qu'il y a un événement onEnd sur le draggable quand le drag est fini
09/03/2009, 22h54
gandalf76fr

En effet, je viens de le découvrir en callback sur les Draggable :
http://wiki.github.com/madrobby/scriptaculous/draggable

mais je ne le vois pas documenté sur les sortables :
http://wiki.github.com/madrobby/scriptaculous/sortables

Soucis de doc ou le onend n'est pas implémenté sur les sortables ???

Je vais tacher de tester tout ça jeudi quand je serai de retour au boulot.
A moins que je n'ai pas la patience d'attendre jusque la et que je vois à la maison ...

En tout cas merci de l'info.

Bon je viens d'essayer le onEnd dans le sortable.create.
Hélas cela ne fonctionne pas : pas de messages d'erreur, mais pas de résultat non plus avec ce 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
29
30
31
32
33
34
35
36
37
38
 
function patient(id,nom,prenom,ddn) {
	this.id = id;
	this.nom = nom;
	this.prenom = prenom;
	this.ddn = ddn;
	new Ajax.Updater(
		'attente',
		'cree_div.php',
		{
			method: 'post',
			parameters: {id: id,nom: nom, prenom: prenom, ddn: ddn},
			insertion: Insertion.Bottom,
			onComplete: function() {
				Sortable.create("attente",{tag:"div",onEnd:function(element){alert(element.id);},dropOnEmpty: true,containment: 
				["attente","iao","radio","labo","med","dechoc","porte","box1","box2","trauma"],constraint:false,only:"lineitem"});
				Sortable.create("iao",{tag:"div",dropOnEmpty: true,containment: 
				["attente","iao","radio","labo","med","dechoc","porte","box1","box2","trauma"],constraint:false,only:"lineitem"});
				Sortable.create("radio",{tag:"div",dropOnEmpty: true,containment: 
				["attente","iao","radio","labo","med","dechoc","porte","box1","box2","trauma"],constraint:false,only:"lineitem"});
				Sortable.create("labo",{tag:"div",dropOnEmpty: true,containment: 
				["attente","iao","radio","labo","med","dechoc","porte","box1","box2","trauma"],constraint:false,only:"lineitem"});
				Sortable.create("med",{tag:"div",dropOnEmpty: true,containment: 
				["attente","iao","radio","labo","med","dechoc","porte","box1","box2","trauma"],constraint:false,only:"lineitem"});
				Sortable.create("dechoc",{tag:"div",dropOnEmpty: true,containment: 
				["attente","iao","radio","labo","med","dechoc","porte","box1","box2","trauma"],constraint:false,only:"lineitem"});
				Sortable.create("porte",{tag:"div",dropOnEmpty: true,containment: 
				["attente","iao","radio","labo","med","dechoc","porte","box1","box2","trauma"],constraint:false,only:"lineitem"});
				Sortable.create("box1",{tag:"div",dropOnEmpty: true,containment: 
				["attente","iao","radio","labo","med","dechoc","porte","box1","box2","trauma"],constraint:false,only:"lineitem"});
				Sortable.create("box2",{tag:"div",dropOnEmpty: true,containment: 
				["attente","iao","radio","labo","med","dechoc","porte","box1","box2","trauma"],constraint:false,only:"lineitem"});
				Sortable.create("trauma",{tag:"div",dropOnEmpty: true,containment: 
				["attente","iao","radio","labo","med","dechoc","porte","box1","box2","trauma"],constraint:false,only:"lineitem"});	   
					}
		}
	)
	document.getElementById('autocomplete').value = '';

Apparemment selon mes dernières lectures il faudrait associer au sortable.create un new draggable :
http://markmail.org/message/pd3d3s4y...+state:results

Va falloir que j'étudie tout ça pour trouver une solution à mon problème.
Bon vu mon archaïsme en anglais, ça va me prendre un peut de temps...

Si vous pensez que je suis sur la mauvaise piste ou si vous avec une meilleur piste à me conseiller, ou des idées pour débrouiller cette piste la, je suis preneur.

Merci d'avance.

16/03/2009, 09h27
gandalf76fr

bon j'ai apparement trouvé la solution : avec starteffect et endeffect on peut avoir les id des éléments déplacés et les id de leur container d'origine et de destination.

Trouvé ici même sur ce forum, comme quoi tout est bien une question de mots clés pour les recherches :D