Manipulation du zIndex

**Ricou13** · 09/01/2006, 21h49

Bonsoir,

J'ai récupéré et adapté un bout de code permettant de faire du Drag & Drop.
Le principe est de pouvoir déplacer des calques (ou balises ayant un ID) sur l'écran.
Il y a donc un fonction sur le onmousedown du calque (DragStart) pour initialiser le drag, une fonction sur document.onmousemove pour le déplacement proprement dit (DragMove) et une fonction sur le onmouseup du calque (DragStop) pour le "drop"

Et j'ai un soucis d'affichage : lorsqu'un calque est en déplacement, j'aimerais qu'il soit au-dessus des autres car, sinon, il peut passer derrière d'autres calques.

Tous les calques concernés ayant le même z-index au départ, j'ai essayé 2 solutions :

1) Dans le DragStart, augmenter le z-index du calque concerné et le remettre à la normale dans le DragStop

2) Dans le DragStart, diminuer le z-index de tous les autres calques et les remettre à la normale dans le DragStop

Mais ça ne change rien et le calque déplacé peut être devant ou derrière les autres selon, finallement, l'ordre naturel des calques. Il semblerait que les modifs (par ex l'augmentation du z-index du calque en mouvement) ne soient effectifs qu'après la fin des fonctions, donc du DragStop.

Auriez-vous d'autres solutions ou idées ?

Merci

**SpaceFrog** · 10/01/2006, 09h52

voilà ce que notre cher ami javatwister m'avait donné à l'époque ...

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
<html> 
<head> 
 
 
<style> 
 
.dragDrop 
{ 
position:absolute; 
color:#FFFFFF; 
font-family:Arial; 
font-size:10pt; 
font-weight:bold; 
z-index:0; 
} 
</style> 
 
<script language="JavaScript"> 
<!-- 
 
function TElement(id) 
{ 
   this.id=id; 
   this.elt=(this.id) ? document.getElementById(id) : null; 
 
   function getX() 
   { 
      return this.elt.offsetLeft; 
   } 
   TElement.prototype.getX=getX; 
 
 
   function getY() 
   { 
      return this.elt.offsetTop; 
   } 
   TElement.prototype.getY=getY; 
 
   function setX(x) 
   { 
      return this.elt.style.left=x+"px"; 
   } 
   TElement.prototype.setX=setX; 
 
   function setY(y) 
   { 
      return this.elt.style.top=y+"px" 
   } 
   TElement.prototype.setY=setY; 
 
} 
 
 
 
function TEvent() 
{ 
   this.x = 0; 
   this.y = 0; 
 
   function init(evt) 
   { 
      this.evt=(evt) ? evt : window.event; // l'objet événement 
      if (!this.evt) return; 
      this.elt=(this.evt.target) ? this.evt.target : this.evt.srcElement; // la source de l'événement 
 
      this.id=(this.elt) ? this.elt.id : ""; 
 
      // Calcul des coordonnées de la souris par rapport au document 
 
      if (this.evt.pageX || this.evt.pageY) 
      { 
         this.x = this.evt.pageX; 
         this.y = this.evt.pageY; 
      } 
      else if (this.evt.clientX || this.evt.clientY) 
      { 
         this.x = this.evt.clientX + document.body.scrollLeft; 
         this.y = this.evt.clientY + document.body.scrollTop; 
      } 
   } 
   TEvent.prototype.init=init; 
 
   function stop() 
   { 
      this.evt.cancelBubble = true; 
      if (this.evt.stopPropagation) this.evt.stopPropagation();    
   } 
   TEvent.prototype.stop=stop;    
} 
 
 
 
function TDragObject(id) 
{ 
   if (!id) return; 
   this.base=TElement; 
 
   this.base(id); 
   this.elt.obj=this 
   this.elt.onmousedown=_startDrag; 
 
   function startDrag(evt) 
   { 
      this.elt.style.zIndex=1; 
      this.lastMouseX=evt.x; 
      this.lastMouseY=evt.y; 
      evt.dragObject=this; 
 
      document.onmousemove=_drag; 
      document.onmouseup=_stopDrag; 
 
      if (this.onStartDrag) this.onStartDrag(); 
   } 
   TDragObject.prototype.startDrag=startDrag;    
 
   function stopDrag(evt) 
   { 
      this.elt.style.zIndex=0; 
      evt.dragObject=null; 
      document.onmousemove=null; 
      document.onmouseup=null; 
 
      if (this.onDrop) this.onDrop(); 
   } 
   TDragObject.prototype.stopDrag=stopDrag; 
 
   function drag(evt) 
   {    
      dX=this.getX()+evt.x-this.lastMouseX; 
      dY=this.getY()+evt.y-this.lastMouseY; 
 
      this.setX(dX); 
      this.setY(dY); 
 
      this.lastMouseX=evt.x; 
      this.lastMouseY=evt.y; 
 
      if (this.onDrag) this.onDrag(); 
 
   } 
   TDragObject.prototype.drag=drag; 
} 
TDragObject.prototype=new TElement(); 
 
 
 
var _event=new TEvent(); // Objet global pour manipuler l'événement en cours 
 
function _startDrag(evt) 
{ 
   _event.init(evt); 
   if (this.obj && this.obj.startDrag) 
   { 
      this.obj.startDrag(_event); 
   } 
} 
 
function _stopDrag(evt) 
{ 
   if (_event.dragObject) _event.dragObject.stopDrag(_event); 
} 
 
function _drag(evt) 
{ 
   _event.init(evt); 
   if (_event.dragObject) _event.dragObject.drag(_event); 
   return false; 
} 
 
function afficherStatus() 
{ 
   window.status="Object ["+this.id+"] se trouve en ("+this.getX()+","+this.getY()+")"+ 
   " text =\""+this.elt.innerHTML+"\""; 
} 
 
 
function load() 
{ 
   tst=new TDragObject("test"); 
   tst.onDrag=afficherStatus; 
 
   tst2=new TDragObject("test2"); 
   tst2.onDrag=afficherStatus; 
} 
 
// --> 
</script> 
</head> 
<body onload="load()"> 
<div id ="test" class="dragDrop" style="background-color:#0000FF;"> 
Déplacez moi ! 
</div> 
 
<div id ="test2" class="dragDrop" style="left:10px; top:50px; background-color:#FF0000;"> 
Moi aussi ! 
</div> 
</body> 
</html>

**Ricou13** · 10/01/2006, 10h13

Bon ben j'ai trouvé une solution.

En fait, le code original permet de déplacé n'importe quel objet du moment qu'il possède un ID.

L'exemple était donné avec des tableaux qui étaient déplacés

Code :

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

<table cellpadding = 0 cellspacing = 0 id="point2" ...

Le concept fonctionne très bien sauf pour le z-index qui n'est pas modifié à la volée.
En fait, cela vient de l'objet tableau lui-même car en mettant des DIV, le changement d'index est bien effectué et l'objet déplacé se retrouve bien au dessus des autres.
Et, là, on peut utiliser n'importe quelle méthode :
- réduire le z-index de tous les autres calques
- augmenter le z-index du calque concerné
- changer la classe dans la feuille de styles

Donc : la modification, à la volée, du z-index ne fonctionne pas avec toutes les balises. Mais elle fonctionne très bien avec les DIV.

**Ricou13** · 10/01/2006, 10h16

Excuses-moi froggy, j'étais en train de saisir mon message quand tu as posté.

**Ricou13** · 10/01/2006, 10h39

J'utilise un concept similaire à base d'objet également mais avec un seul objet qui gère tous les éléments "dragable".

Au niveau prog, cela revient quasiment au même mais je peux également définir des "zone de drop" en dehors desquelles, l'élément déplacé ne peut être posé.

J'y ai ajouté quelques modifs dont une fonction permettant de permuter 2 éléments si on en pose un sur l'autre.
L'idée étant de pouvoir réorganiser l'ordre d'affichage de photos directement à la souris.

**SpaceFrog** · 10/01/2006, 10h52

a poster dans les propositions de code source ?

**Ricou13** · 11/01/2006, 12h09

Envoyé par SpaceFrog

a poster dans les propositions de code source ?

C'est à dire ?

**SpaceFrog** · 11/01/2006, 13h06

il y a en haut de ce forum un post-it dans lequel on peut déposer des codes sources utiles à tous ...

**javatwister** · 11/01/2006, 13h56

ah oui mais c'est pas de moi ces salades hein!
même sûr que c'est toi qui l'avais fait tout seul, SF

**SpaceFrog** · 11/01/2006, 13h59

mouarf je suis sûr que t'as des mômes un peu partout que tu ne reconnais pas

**javatwister** · 11/01/2006, 14h11

tu insultes ma haute conjugalité là

**SpaceFrog** · 11/01/2006, 14h14

je t'assures qu'il est de toi ... tu veux faire une recherche en paternité ...?

**Ricou13** · 12/01/2006, 10h17

Mais pour l'instant, je me bats encore avec les coordonnées des éléments et la récupération des propriétés de style selon qu'elle sont "in line" ou en CSS (ça c'est quasi résolu).

Pour les positionnement des éléments, le code original utilise des éléments en "absolute" directement sur la page. Quand ces éléments se trouvent dans un DIV, lui même positionné, le calcul des coordonnées a tendance à faire un peu n'importe quoi. Donc j'y travaille encore...

**Ricou13** · 12/01/2006, 16h25

J'ai fait un nouveau post pour finaliser le code :

http://www.developpez.net/forums/viewtopic.php?t=441713

Manipulation du zIndex

JavaScript

Discussions similaires

Partager

Partager