Discussion :

[gwinyam]

Au temps pour moi

[asagtoth]

salut les gars,
gwinyam j'ai utilisé ce tuto pour faire mon code.
PAr contre comme vous je me pose la question de la possibilité d'avoir un scroll avec ma liste <ul> <li>

[le_chomeur]

sur ton ul :

Code :

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

1
2
 
style="overflow:auto"

sans oublier de préciser une hauteur et une largeur fixe !

[asagtoth]

ouais je viens de faire ça. et ça marche sans problème.

Maintenant reste à renvoyer les données de mon parseList et là c'est une autre histoire.

[le_chomeur]

récupères les valeurs, met les dans un champs text hidden avec un séparateur genre # et parse les coté serveur

[asagtoth]

Salut, c'est là que le bas blesse, ne faisant du javascript que depuis samedi j'ai un peu de mal mais je cherche et je vais trouver lol.

j'ai trouvé un truc sur la technique du post mais je vais voir pour appliquer la tienne

ma fonction showButton est désormais comme ça afin de transformer mon parseList en texte

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
 
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");
var Tab = parseList(ul2);
window.write('<input type="hidden" name="tab" value="'+Tab+'"//>');
},

et le bouton envoyer et de ce type

Code :

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

<input name="form_btn" type="submit" id="showButton" value="Envoyez la Note" >

j'espèrais pouvoir faire celà:
Lorsque je clique sur mon bouton "form_btn" ça lance d'abord ma fonction showButton afin de créer la variable new_tab_js qui vient alimenter mon value sans mon input et qu'une fois que tout ça soit fait que la totalité des différents input de mon formulaire parte vers la page sendnote.php

et ma page sendnote.php est ainsi:

Code :

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

1
2
3
4
5
6
<?php
extract($_POST,EXTR_OVERWRITE);
extract($_GET,EXTR_OVERWRITE);
$test = $_POST['tab'];
echo $test;
?>

Bon ça ne fonctionne pas du tout. lol

[gwinyam]

J'élèverai quand même un doute sur la réelle utilisabilité de ce truc.

Faire du drag&drop entre deux listes déroulantes, ça ne me semble vraiment pas ce qu'il y a de plus simple à manipuler. Après je demande à voir bien sur

[asagtoth]

salut,
si ça marche plutôt bien le dragndrop.
Dans la première liste j'ai les utilisateurs de mon reseau (une 20taine).
Je fais un drag n drop vers la deuxième liste des utilisateurs que je veux sélectionner.
J'aurais pu faire 2 select avec un bouton ajouter entre les 2 mais je trouvais ça plus sympa de faire un drag n drop. Enfin je vais peut être devoir le faire vu que je n'arrive pas à récupérer les valeurs de ma liste 2 pour les passer en php

[E.Bzz]

Faire du drag&drop entre deux listes déroulantes, ça ne me semble vraiment pas ce qu'il y a de plus simple à manipuler.

+1
Un double-clic est nettement plus pratique.
Le seul cas où le drag and drop se justifie est celui où il faut choisir entre plusieurs listes "cibles" ...

A+

[asagtoth]

certes mais bon j'avais envie de faire comme ça pour ne pas toujours faire la même chose et ainsi progresser un peu.

[gwinyam]

si ça marche plutôt bien le dragndrop.

En fait, je crois que tu n'as pas bien compris mon point de vue.

Je suis tout à fait pour l'utilisation du drag&drop entre deux listes. C'est très userfriendly, je suis totalement d'accord.

Ma remarque considère surtout la transaction d'un élément à un autre entre deux listes déroulantes.

Deux listes de sélection multiple me semblent vraiment bien plus adaptées (comme dans l'exemple que j'ai fourni plus haut avec le framework de Yahoo)

[E.Bzz]

C'est très userfriendly

C'est effectivement le terme qui correspond le mieux à ce genre de ... fonctionnalité

Très web 2.0, quoi

[le_chomeur]

quel rabat la joie l'E.bzz

de mon coté j'ai réussis sans trop de soucis à envoyer d'une liste a l'autre ( au format ul/li ) en drag and drop mais je dois créer une méthode qui créer dynamiquement cette liste a partir d'une liste option ...

la flemme

si besoins je posterais le code actuel

[E.Bzz]

quel rabat la joie l'E.bzz

Juste développeur réaliste, et utilisateur flemmard (aussi).

Avec le double-clic, la fonction fait en tout et pour tout 5 lignes (8 avec le contrôle de présence dans la cible), sans aucun autre problème à se poser (et encore, elle est optimisable)

Et pas besoin de viser la "cible"

EDIT : mais pour "la joie", je conçoit très bien qu'on souhaite faire "plus fun", et d'ailleurs, les solutions m'intéressent
Mais perso, je ne les utiliseraient éventuellement, que lorsqu'elles me seront indispensables (dans notre cas, si plusieurs cibles potentielles, comme dit plus haut).

A+

[le_chomeur]

JFF ( Just For Fun )

le fichier dragListToListe.js :

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
 
/**
 * @author Le_chomeur
 */
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-20 + '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);
	}
};

exemple rapide :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.fakeList{
				margin:0px;
				padding:0px;
				width:200px;
				height:150px;
				background-color:#EDF5CC;
				border:1px solid #3F647F;
				overflow:auto;
				list-style:none;
			}
			.fakeList li{
				background-color:#F5F5F5;
				border-bottom:1px solid #3F647F;
				padding-left:8px;
			}
			.Draggable{
				border:1px solid #666;
				background-color:#4C9294;
			}
			.inDrag{
				border:1px dashed #ccc;
				background-color:#E2F1F3;
				font-size:12px;
				position:absolute;
			}
 
		</style>
	<script src="dragListToListe.js"></script>
	</head>
	<body>
		<ul class="fakeList" id="test" style="float:right">
			<li>menu 1</li>
			<li>menu 2</li>
			<li>menu 3</li>
			<li>menu 4</li>
			<li>menu 5</li>
			<li>menu 1</li>
			<li>menu 2</li>
			<li>menu 3</li>
			<li>menu 4</li>
			<li>menu 5</li>
		</ul>
		<ul class="fakeList" id="destination">	</ul>
		<script type="text/javascript">
 
			var mesOptions = document.getElementById('test').getElementsByTagName('li');
			var dest = document.getElementById('destination');
			for(var i = 0 , l = mesOptions.length; i <l ; i++){
				Drag.init(mesOptions[i],dest);
			}
 
		</script>
	</body>
</html>

reste la gestion du curseur dans l'ojbet , et la possibilité de géré plusieurs liste d'arrivé mais rien de bien méchant

[asagtoth]

Salut,

Au secours pour le renvoie de ma variable Tab vers une autre page.
Je n'ai plus que ça a faire et je n'y arrive pas du tout

[le_chomeur]

as tu réussis a mettre ta variable tab dans un champs input ??

[asagtoth]

bonjour,non je n'ai rien réussi lol.
mes 4 - 5 jours de javascript me posent problème lol.

mais je me demande si ce que je veux faire est possible.
Voilà en raccourci mon formulaire

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
 
<form name="form_admin" method="post" action= "sendnote.php">
<input type="text" size="26" name="titre" id="titre" />
<input type="text" size="26" name="stitre" id="stitre" />
 
//ma liste 1 pour le dragndrop
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
 
//ma liste 2pour le dragndrop
<div><ul></ul></div>
 
//ma fonction javascript qui me permet d'avoir la composition de la liste 2
<script type="text/javascript">
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");
        var Tab = parseList(ul2);
    }
</script>
 
//et enfin mon bouton qui déclanche ma fonction javascript et qui valide mon formulaire
<input name="search_btn" type="submit" id="showButton" value="envoyez">
</form>

et donc tous les input et la composition de la liste 2 dois partir vers la page sendnote.php qui me permettra de tout insérer dans une base mysql

[le_chomeur]

document.getElementById('toninput').value = tab ????

[asagtoth]

c'est une question?