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

Vue hybride

Discussions similaires

Partager

Partager