petit conseil avant un drag n drop

**asagtoth** · 21/11/2008, 17h20

Bonjour à tous,
je suis en cours de développement d'un portail intranet. Dans ce portail j'ai créé un formulaire tout simple en html+php qui renvoie vers une page php les infos saisies afin de les insérer dans une table mysql. Jusque là rien de compliqué.

Dans ce formulaire je souhaite avoir 2 textarea avec un scroll sur le côté.
la zone de gauche sera rempli avec le nom des utilisateurs à partir d'une requete sql.
Je souhaiterais que les utilisateurs remplissent la zone de droite en faisant un drag & drop avec les noms de la zone de gauche. Un peu comme lorsqu'on déplace un fichier dans un explorateur.

comme sur ce site: http://www.zapatec.com/website/main/...ItemsList.html
Connaissez vous des librairies ajax ou javascript me permettant de faire celà? pourrais-je récupérer les infos de la liste avec mon formulaire?d'avance merci

**E.Bzz** · 21/11/2008, 17h34

Bonjour,

Envoyé par asagtoth

Dans ce formulaire je souhaite avoir 2 textarea avec un scroll sur le côté.
la zone de gauche sera rempli avec le nom des utilisateurs à partir d'une requete sql.
Je souhaiterais que les utilisateurs remplissent la zone de droite en faisant un drag & drop avec les noms de la zone de gauche. Un peu comme lorsqu'on déplace un fichier dans un explorateur.

Je connais pas ces librairies, mais ce que tu décris correspond plus à des select qu'à des textarea.

D'ailleurs, ça serait beaucoup plus simple à gérer avec des select

A+

**asagtoth** · 21/11/2008, 18h22

oui je voulais dire des select plutôt que des textarea.

il existe quelques librairies qui permettent des drag & drop mais la plupart du temps c'est à base de div. j'essaie de voir avec ça mais pour renvoyez les infos du formulaire et celle contenue dans les div ça va pas être facile

**le_chomeur** · 21/11/2008, 18h27

sinon , si tu attends ce we, ça me botte bien de développer cette fonction ^^

**asagtoth** · 21/11/2008, 18h31

bien sur j'ai le temps, mais si je peux y participer c'est mieux pour comprendre lol.
J'ai trouvé ça mais ça ne fonctionne pas sur IE

http://www.ibrow.com/blog/2007/09/13...ith-overflows/

comment fait-on pour prendre sa carte au CCMPTP?

**asagtoth** · 21/11/2008, 23h13

j'ai aussi trouvé ça
http://www.scribd.com/word/full/6374...f2ypajdemhkqgu

**le_chomeur** · 21/11/2008, 23h42

la deuxiemme solution a l'air de convenir parfaitement a tes besoins non ??

de mon coté je vais codé quelques chose dans ce genre :

Code :

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

1
2
3
function dragListeToListe(listeDepart,listeArrive){
...
}

puis l'instanciation sera :

Code :

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

var newDragListe = new dragListeToListe(listeDepart,listeArrive);

je m'y attache dès demain ^^

**asagtoth** · 22/11/2008, 00h00

oui il semble convenir parfaitement à mes besoins l'exemple 2 mais j'ai du faire une erreur car ça ne fonctionne pas. je vais le reprendre.

car déjà dans le listing 11 il y a cette ligne:

<script type="text/javascript" src="interface.js"></script>

et pas une fois dans le texte il ne parle de ce fichier interface.js, j'en ai déduit que c'était la librairie draggable qu'il nous demande de télécharger
ensuite il nous demande au début de créer un fichier script.js dont il n'apparaît jamais durant le tuto par contre il parle d'un fichier script.php donc je vais revoir un peu tout ça.

La fonction que tu vas développé semble bien compliqué bon courage

**le_chomeur** · 22/11/2008, 13h04

premier jet ^^

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
 
<!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:1px dashed #ccc;
	background-color:#E2F1F3;
	font-size:12px;
	position:absolute;
}
</style>
<script type="text/javascript">
var Drag = {
 
	MyObj : null,
	MyObjDest : null,
	MyObjToLimit : null,
	MyDivTempo : null,
 
	init : function(o,b,MyObjToLimit)
	{
		Drag.MyObj = o ;
		Drag.MyObjDest = b;
		//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);
		//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;
 		Drag.createDivTempo();
		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{
			if(Drag.MyDivTempo == null){Drag.createDivTempo();}
			//On laisse le focus sur l'option sélectionnée
			Drag.MyObj.focus();
			Drag.MyDivTempo.style.top = curY-5 + 'px';
			Drag.MyDivTempo.style.left = curX+5 + 'px';
			Drag.detectPosition();
		}
 
		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;
		Drag.detectPositionDrop();
		//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);
	},
	createDivTempo : function(){
		var d = document;
		var coord = Drag.findPos(Drag.MyObj);
		Drag.MyDivTempo =	d.createElement('div');
		Drag.MyDivTempo.innerHTML =coord + " " + Drag.MyObj.ecartX ;
		Drag.MyDivTempo.className = "inDrag";
		Drag.MyDivTempo.style.width = Drag.MyObj.offsetWidth - 20+ "px";
		Drag.MyDivTempo.style.left = coord[0] + "px";
		Drag.MyDivTempo.style.top = coord[1] - Drag.MyObj.offsetHeight + "px";
		//On ajoute l'item en tout premier
		d.body.appendChild(Drag.MyDivTempo);
	},
	createNewOption : function(){
		//On clone l'option
		var optionToAdd = Drag.MyObj.cloneNode(true);
		//On l'ajoute dans la liste de destination
		Drag.MyObjDest.appendChild(optionToAdd);
 
	}
	,
	detectPosition : function(){
		var coord = Drag.findPos(Drag.MyObjDest);
		var coord2 = Drag.findPos(Drag.MyDivTempo);
		var X1 = coord[0];
		var Y1 = coord[1];
		var XX1 = parseInt(Drag.MyObjDest.offsetWidth) + X1;
		var YY1 = parseInt(Drag.MyObjDest.offsetHeight) + Y1;
		var X2 = coord2[0];
		var Y2 = coord2[1];
		var XX2 = parseInt(Drag.MyDivTempo.offsetWidth) + X2
		var YY2 = parseInt(Drag.MyDivTempo.offsetHeight) + Y2;
 
		if(X1 < X2 && Y1 < Y2 && XX1 > XX2 && YY1 > YY2 ){
			Drag.MyObjDest.style.backgroundColor = "green";
 
		}
		else{
			Drag.MyObjDest.style.backgroundColor = "#ffffff";
		}
	}
	,
	detectPositionDrop : function(){
		var coord = Drag.findPos(Drag.MyObjDest);
		var coord2 = Drag.findPos(Drag.MyDivTempo);
		var X1 = coord[0];
		var Y1 = coord[1];
		var XX1 = parseInt(Drag.MyObjDest.offsetWidth) + X1;
		var YY1 = parseInt(Drag.MyObjDest.offsetHeight) + Y1;
		var X2 = coord2[0];
		var Y2 = coord2[1];
		var XX2 = parseInt(Drag.MyDivTempo.offsetWidth) + X2
		var YY2 = parseInt(Drag.MyDivTempo.offsetHeight) + Y2;
		if(X1 < X2 && Y1 < Y2 && XX1 > XX2 && YY1 > YY2 ){
			Drag.createNewOption();
		}
		//Dans tous les cas on détruit la div temporaire
		document.body.removeChild(Drag.MyDivTempo);
	}
};
</script>
</head>
<body>
<select id="test" size="5" style="width:150px;">
<option value="1">test</option>
<option value="2">titi</option>
<option value="3">tata</option>
<option value="4">toto</option>
<option value="5">lol</option>
<option value="6">mick</option>
</select>
 
<div style="position:absolute;top:100px">
<select id="destination" size="5" style="width:150px;position:absolute;left:400px;">
</select>
</div>
<div style="position:absolute;right:30px;left:10px;" id="debug"></div>
<script type="text/javascript">
	var mesOptions = document.getElementById('test').options;
	var dest = document.getElementById('destination');
	for(var i = 0 , l = mesOptions.length; i <l ; i++){
		Drag.init(mesOptions[i],dest);
	}
</script>
</body>
</html>

**asagtoth** · 22/11/2008, 22h10

Salut,

j'ai testé ton code. C'est exactement ça. Quelle rapidité. Waouh!!!

J'ai un problème avec IE7. Firefox ça marche nickel comme toujours.

je vais tenter de voir pour intégrer ton code dans mon formulaire.

A+

**le_chomeur** · 22/11/2008, 22h29

attend la version finale je cherche également pourquoi ça bug sous ie 7

EDIT : trouvé ... ie ne gère pas onmousedown sur les options :'( ni sur le select

**le_chomeur** · 23/11/2008, 00h04

Question , serais tu contres , le fait de remplacer dynamiquement la liste déroulante par une fausse ?? ( a base de li / ul )

**gwinyam** · 23/11/2008, 00h07

Avec le Yahoo User Interface (YUI - Framework Ajax), tu peux facilement faire ce que tu demandes. Il est gratis bien évidemment. Hésite pas à jeter un oeil

**asagtoth** · 23/11/2008, 21h13

non je ne suis pas contre l'utilisation d'un ul li mais par contre je me pose la question à savoir il sera possible que les noms de cette liste puissent être supprimé lorsque l'on en prendra un.

Sinon je vais aller voir ces trucs sur yahoo. j'en avais entendu parlé mais j'ai pas trouvé sur leur site.

**le_chomeur** · 23/11/2008, 22h10

oui aucun souçis

le problème insolvable => IE ne gère pas le mousedown sur les options d'ou l'impossibilité de faire du drag and drop a partir de vrai liste

mais partir d'une liste a base de li /ul aucun souçis ^^

oui possibilité de supprimer l'option qui a été transféré

**asagtoth** · 25/11/2008, 00h19

salut, voilà ce que j'ai fait de mon côté en utilisant les librairie yahoo. ça marche sur IE7 et Firefox

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
 
<form name="form_admin" method="post" action= "sendnote.php">
<tr><td align="right" width="150">Titre : </td><td><input type="text" size="26" name="recherche" id="recherche" /></td></tr>
<tr><td align="right" width="150">Sous Titre : </td><td><input type="text" size="26" name="recherche" id="recherche" /></td></tr>
<tr><td align="right" width="150">Texte : </td>
  <td height="30"><textarea name="objet" cols="53" rows="20"></textarea></td>
</tr>
<tr><td align="right" width="150">Fichier : </td><td><input type="file" size="26" name="recherche" id="recherche" /></td></tr>
<tr><td align="right" width="150">Services Destinataires : </td><td>   
<div class="workarea">
  <h3>List 1</h3>
  <SELECT name="depart" size="25" class="draglist">
  <?php
require_once("Connexion.inc");
include("connexion.php");
require_once("Jeuenregistrements.inc");
$connect = new Connexion();
$connect->ouvrir($type_base,$nom_base,$util_base,$pass_base,$hote_base);
$req_sql1 = "SELECT * FROM services;";
$Enreg1 = $connect->executer($req_sql1);
$nbEnreg1 = $Enreg1->getNombreEnregistrements();
 
for($i=1;$i<=$nbEnreg1;$i++)
  {
  $nom_service = $Enreg1->getJeuEnregistrements($i,'nom_service');
  
    echo"<OPTION class\"list1\" id=\"li1_$i\">$nom_service</OPTION>";
}
$req_sql2 = "SELECT * FROM services_exterieurs;";
$Enreg2 = $connect->executer($req_sql2);
$nbEnreg2 = $Enreg2->getNombreEnregistrements();
 
for($j=1;$j<=$nbEnreg2;$j++)
  {
  $k= $j + $i;
  $nom_service_ext = $Enreg2->getJeuEnregistrements($j,'nom_service');
  
    echo"<OPTION class=\"list1\" id=\"li1_$k\">$nom_service_ext</OPTION>";
}
 
 
        ?>
  </SELECT>
</div>
 
<div class="workarea">
  <h3>List 2</h3>
  <ul id="ul2" class="draglist">
 
  </ul>
</div>
<script type="text/javascript">
 
(function() {
 
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;
 
YAHOO.example.DDApp = {
    init: function() {
 
        var rows=30,cols=2,i,j;
        for (i=1;i<cols+1;i=i+1) {
            new YAHOO.util.DDTarget("ul"+i);
        }
 
        for (i=1;i<cols+1;i=i+1) {
            for (j=1;j<rows+1;j=j+1) {
                new YAHOO.example.DDList("li" + i + "_" + j);
            }
        }
 
        Event.on("showButton", "click", this.showOrder);
        Event.on("switchButton", "click", this.switchStyles);
    },
 
    showOrder: function() {
        var parseList = function(ul) {
            var items = ul.getElementsByTagName("li");
            var out = " ";
            for (i=0;i<items.length;i=i+1) {
                out += items[i].id + " ";
            }
            return out;
        };
 
        var ul2=Dom.get("ul2");
        alert(parseList(ul2));
 
    },
 
    switchStyles: function() {
        Dom.get("ul1").className = "draglist_alt";
        Dom.get("ul2").className = "draglist_alt";
    }
};
 
 
YAHOO.example.DDList = function(id, sGroup, config) {
 
    YAHOO.example.DDList.superclass.constructor.call(this, id, sGroup, config);
 
    this.logger = this.logger || YAHOO;
    var el = this.getDragEl();
    Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
 
    this.goingUp = false;
    this.lastY = 0;
};
 
YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy, {
 
    startDrag: function(x, y) {
        this.logger.log(this.id + " startDrag");
 
        var dragEl = this.getDragEl();
        var clickEl = this.getEl();
        Dom.setStyle(clickEl, "visibility", "hidden");
 
        dragEl.innerHTML = clickEl.innerHTML;
 
        Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
        Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
        Dom.setStyle(dragEl, "border", "2px solid gray");
    },
 
    endDrag: function(e) {
 
        var srcEl = this.getEl();
        var proxy = this.getDragEl();
 
 
        Dom.setStyle(proxy, "visibility", "");
        var a = new YAHOO.util.Motion( 
            proxy, { 
                points: { 
                    to: Dom.getXY(srcEl)
                }
            }, 
            0.2, 
            YAHOO.util.Easing.easeOut 
        )
        var proxyid = proxy.id;
        var thisid = this.id;
 
        animation
        a.onComplete.subscribe(function() {
                Dom.setStyle(proxyid, "visibility", "hidden");
                Dom.setStyle(thisid, "visibility", "");
            });
        a.animate();
    },
 
    onDragDrop: function(e, id) {
 
        if (DDM.interactionInfo.drop.length === 1) {
 
(YAHOO.util.Point)
            var pt = DDM.interactionInfo.point; 
 
 
            var region = DDM.interactionInfo.sourceRegion; 
 
            if (!region.intersect(pt)) {
                var destEl = Dom.get(id);
                var destDD = DDM.getDDById(id);
                destEl.appendChild(this.getEl());
                destDD.isEmpty = false;
                DDM.refreshCache();
            }
 
        }
    },
 
    onDrag: function(e) {
 
        var y = Event.getPageY(e);
 
        if (y < this.lastY) {
            this.goingUp = true;
        } else if (y > this.lastY) {
            this.goingUp = false;
        }
 
        this.lastY = y;
    },
 
    onDragOver: function(e, id) {
 
        var srcEl = this.getEl();
        var destEl = Dom.get(id);
 
        if (destEl.nodeName.toLowerCase() == "li") {
            var orig_p = srcEl.parentNode;
            var p = destEl.parentNode;
 
            if (this.goingUp) {
                p.insertBefore(srcEl, destEl); 
            } else {
                p.insertBefore(srcEl, destEl.nextSibling);
            }
 
            DDM.refreshCache();
        }
    }
});
 
Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
 
})();
</script>
 
</td></tr>
<tr><td align="right" colspan="2"><input name="form_btn" type="submit" id="form_btn" value="Envoyez la Note" ></td></tr>
</form>

Tout fonctionne parfaitement mais mon problème tant redouté le voici:

l'alerte "alert(parseList(ul2));" m'affiche correctement ce dont j'ai besoin de récupérer dans ma page sendnote.php mais la question est comme lui envoyé et le reste du formulaire bien sur?

alert(parseList(ul2)); : m'affiche par exemple lil_2 lil_14 lil_8
ce qui correspond aux id des noms que j'ai inséré en dragndrop dans la liste 2.d'avance merci

**gwinyam** · 25/11/2008, 09h29

Le framework Ajax de Yahoo : http://developer.yahoo.com/yui/

Et si j'ai bonne mémoire, ce que tu veux faire correspond plus ou moins à ça : http://developer.yahoo.com/yui/examp...d-reorder.html

**le_chomeur** · 25/11/2008, 09h57

c'est ce que je disais , on ne peut pas le faire avec de vraie liste déroulante ^^
toute les librairies passent par des listes a base de ul/li ^^

bon je vais remonter mes manches pour une prochaine contribution ^^

**gwinyam** · 25/11/2008, 10h01

Je vois pas trop comment on pourrait faire slider des éléments d'une liste déroulante...

Sur une liste normale ou une liste de sélection multiple ok, mais pas sur une liste déroulante

**le_chomeur** · 25/11/2008, 10h12

c'est le même composant gwinyam

il s'agit d'un select avec une size définit , ni plus ni moins

petit conseil avant un drag n drop

JavaScript

Discussions similaires

Partager

Partager