Drag and drop avec retour

**gandalf76fr** · 17/02/2009, 12h39

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.

**gwyohm** · 17/02/2009, 20h09

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.

**gandalf76fr** · 17/02/2009, 22h06

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.

**Bovino** · 17/02/2009, 22h16

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

**gandalf76fr** · 18/02/2009, 08h50

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.

**le_chomeur** · 18/02/2009, 08h57

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

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

Drag and drop avec retour [script.aculo.us]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager