drag and drop, le retour

**javatwister** · 22/01/2011, 18h04

je relance mon drague and drop maison, vu que je n'en ai pas retrouvé trace sur le forum (???)

alors j'ai un peu simplifié le bidule et commenté le code (une fois n'est pas coutume, et je sais que je peux encore faire mieux)

http://javatwist.imingo.net/dragdrop.htm

le but est par exemple de se ménager une "poubelle de page", ou encore de gérer plusieurs listes de données en mélangeant les items à qui mieux mieux, bref, à vous de voir;

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
237
238
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Drague and drop</title>
 
<style type="text/css">
 
body{
margin:0px;
}
 
#cadre{
margin:100px 0px 100px 200px;
padding:0px;
}
 
#cadre ul{
float:left;
list-style-type:none;
padding:0px;
border:double 4px #000000;
width:200px;
}
 
#cadre li{
text-align:center;
line-height:25px;
width:200px;
cursor:move;
position:relative;
left:0px;
top:0px;
margin:0px;
padding:0px;
background-color:#ff0000;
font-size:20px;
}
 
</style>
 
</head>
<body>
 
<div id="cadre">
 
<ul style="margin:10px;">
<li>truc</li>
<li>bidule</li>
<li>machin</li>
<li>chose</li>
<li>objet</li>
<li>entité</li>
</ul>
 
<ul style="margin:50px;">
<li>truc</li>
<li>bidule</li>
<li>machin</li>
<li>chose</li>
<li>objet</li>
<li>entité</li>
</ul>
 
<ul style="margin:2px;">
<li>truc</li>
<li>bidule</li>
<li>machin</li>
<li>chose</li>
<li>objet</li>
<li>entité</li>
</ul>
 
<ul style="margin:100px;">
<li>truc</li>
<li>bidule</li>
<li>machin</li>
<li>chose</li>
<li>objet</li>
<li>entité</li>
</ul>
 
</div>
 
<script type="text/javascript">
 
var c=document.getElementById("cadre").getElementsByTagName("li");// les éléments "li"
var liste=document.getElementById("cadre").getElementsByTagName("ul");// les éléments "ul"
var foc;// la ligne courante, capturée par la souris
var posx;// position latérale de la souris à la capture
var posy;// position verticale de la souris à la capture
var evx;// position latérale de la souris
var evy;// position verticale de la souris
var cible;// ligne sur laquelle passe la souris
var cible2;// liste vide sur laquelle passe la souris
var plusx;// valeur du scroll horizontal de la fenêtre
var plusy;// valeur du scroll vertical de la fenêtre
 
var haut=25; // hauteur d'une ligne
var large=100; // largeur d'une demi-ligne
var demi=12; // moitié de haut - 1;
 
////////////////////////////////////////
// au chargement
////////////////////////////////////////
window.onload=function(e){
 
////////////////////////////////////////
// gestionnaire de déplacement 
////////////////////////////////////////
	document.onmousemove=go;
 
////////////////////////////////////////
// Capture de l'élément
////////////////////////////////////////
	for(i=0;i<c.length;i++){
		c[i].onmousedown=function(e){
			if(foc){
			/////////////////////////////////////////////////
			// clic droit accidentel: l'élément est perdu
			/////////////////////////////////////////////////
				foc.style.left="0px";	
				foc.style.top="0px";
				foc=false;
				for(j=0;j<c.length;j++){
					c[j].style.backgroundColor="#ff0000"
				};
 
				cible=false;cible2=false;
			}
			/////////////////////////////////////////////////
			else{		
				cible=false;
				evx=!e ? event.clientX : e.clientX;
				evy=!e ? event.clientY : e.clientY;
				this.style.cursor="move";
				this.style.backgroundColor="#00ff00";
				foc=this;
				for(j=0;j<c.length;j++){
					c[j].style.zIndex=1;
				}
				this.style.zIndex=2;
 
				plusx=document.documentElement.scrollLeft;
				plusy=document.documentElement.scrollTop;
				posx=evx+plusx;
				posy=evy+plusy;
			}
		}
	}
}
 
////////////////////////////////////////
// Déplacement de l'élément
////////////////////////////////////////
function go(e){
	if(foc){
		evx=!e ? event.clientX : e.clientX;
		evy=!e ? event.clientY : e.clientY;
		plusx=document.documentElement.scrollLeft;
		plusy=document.documentElement.scrollTop;
		foc.style.left=evx-posx+plusx+"px";
		foc.style.top=evy-posy+plusy+"px";
 
		for(j=0;j<c.length;j++){
			if(c[j]!=foc){
				if(Math.abs(foc.offsetLeft-c[j].offsetLeft)<large && Math.abs(foc.offsetTop-c[j].offsetTop)<demi){
					c[j].style.backgroundColor="#ffff00";cible=c[j];cible2=false;break;
				}
				else{
					c[j].style.backgroundColor="#ff0000";cible=false;cible2=false;
				}
			}
		}
 
		for(j=0;j<liste.length;j++){
			if(liste[j].getElementsByTagName("li").length==0){
				if(Math.abs(foc.offsetLeft-liste[j].offsetLeft)<large && Math.abs(foc.offsetTop-liste[j].offsetTop)<demi){
					cible2=liste[j];cible=false;break;
				}
 
			}
		}
	}
}
 
 
 
////////////////////////////////////////
// Relâchement de l'élément
////////////////////////////////////////
document.onmouseup=function(e){
	if(foc){				
		foc.style.zIndex=1;
		foc.style.left="0px";	
		foc.style.top="0px";
 
		if(cible){
			cible.parentNode.insertBefore(foc,cible);
		}
		else if(cible2){
			cible2.appendChild(foc);
		}
 
		for(j=0;j<liste.length;j++){
			with(liste[j].style){
				height= liste[j].getElementsByTagName("li").length==0 ? haut+"px" : liste[j].getElementsByTagName("li").length*haut+"px"
			}
		}
 
		for(j=0;j<c.length;j++){
			c[j].style.backgroundColor="#ff0000"
		};
		foc=false
		cible=false;
		cible2=false;
	}
}
 
 
////////////////////////////////////////
// Interdire la sélection de texte
////////////////////////////////////////
function no(){
	return false
}
 
if(typeof document.onselectstart!="undefined"){
	document.onselectstart=no;
}
 
document.onmousedown=no;
 
</script>
 
</body>
</html>

Invité · 08/02/2011, 19h22

j'aime bien ce script mais j'aurais une remarque a faire:

je sais pas si c'est de la fainéantise mais pourquoi des variables et fonctions globales

**javatwister** · 09/02/2011, 07h39

parce qu'il n'y a jamais qu'un seul élément actif;

un code "objet" ne me paraît pas rentable; là, les variables sont pour le coup résolument variables et la même variable vaut pour tous les éléments du monde; pas la peine d'en faire des propriétés / méthodes de chaque objet;

Invité · 09/02/2011, 13h18

je pense plutot a une variable globale contenant l'associtiation nom valeur ou les nom seraient soit le nom des variable dite globale soit le nom des fonction,les fonctionetant toutes annonyme

la facon de coder reste la meme (fonctionnel) sauf que au lieux d'appeler une fonction directement par son nom on fera

nomdemavariable.nomdemafonction()

et a chaque fois que l'on declare une fonction ou variable on utilise la meme syntaxe que l'on utilise quand on declare une variable associative comprenanr plusieur valeurs

nom de la valeur(lenom), deux petit point ( : ), valeur de la variable ou le mot fonction() pour une fonction et pour finir la virgule afin de délimiter chaque elements (,)puis on passe a l'autre valeur ou fonction. Pour la derniere valeur surtout ne pas mettre de virgule ie n'aime pas mais c'est normale

fonction classique

Code :

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

1
2
3
4
5
6
7
8
 
 
varglobale=2
 
fonction bonjour(){
var a=1
alert(globale+a)
}

appel a la fonction

Code :

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

button onclick='bonjour()'

l'autre facon

Code :

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

1
2
3
4
5
6
7
8
9
var mavariable={
 
globale:2,
 
bonjour:fonction(){
var a=1
alert(mavariable.globale+a)
}
}

appel a la fonction

Code :

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

button onclick=' mavariable.bonjour()'

**javatwister** · 09/02/2011, 15h30

ben si ça te paraît intéressant...

Invité · 09/02/2011, 16h15

c'est surtout pour garantir un minimum de scope au niveau des variable globale et meme des fonctions

**m11abc** · 19/07/2014, 12h18

bonjour,
votre programme me permet de comprendre un peu drag and drop mais je recherche une solution pour manipuler les images dans une sorte de mur de centaines de photos botaniques... serait il possible de remplacer les lignes par des colonnes ... j'ai essayé avec table, tr, td, les images se déplacent mais ne restent pas en place ....
de plus avec javasript, comment connaitre l'identité de l'image saisie et celle ou on relache pour ensuite instruire mysql

merci d'avance

l michel

drag and drop, le retour

Contribuez

Discussions similaires

Partager

Partager