mouvements XY javascript

Version imprimable

04/07/2006, 16h08
speedev

mouvements XY javascript

Voil�, j'aimerai m'auto-former sur les drag and drop ou ne serait-ce que sur la mobilit� des objets avec javascript.
Ex ici-m�me, lorsque l'ont clique sur le menu liens-rapides, un panneau se d�roule.

J'aimerai incorporer qlq anim du genre sur crtes de mes applis.
Avant �a j'aimerai reccueillir vos adresses pr�f�r�es, je ne cherche pas forc�ment le cours de A � Z vu que je ma�trise d�j� une bonne partie du JS, mais des cours ou astuces pr�cis�ment centr�e sur les mouvements d'objets me serait bien utile!

Merci

Je viens de penser � �a...qlqun y a peut-�tre d�j� pens�...:
alert('� malibu');
-_-' dsl....fallait que je le dise....ok ok je m'en vais...
04/07/2006, 16h12
SpaceFrog

un chtit code � �tudier �a te tente ?
04/07/2006, 16h12
speedev

Carr�ment...me file pas celui de netvibes.net, je l'ai d�j� �tudi�...lol

netvibes.com pardon

Code:

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
<html> 
<head> 
 
 
<style> 
 
.dragDrop 
{ 
position:absolute; 
color:#FFFFFF; 
font-family:Arial; 
font-size:10pt; 
font-weight:bold; 
z-index:0; 
cursor:hand;
} 
</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> 
<iframe src="www.ouestisol.fr"></iframe>
</body> 
</html>

04/07/2006, 16h18
speedev

Merci lol
Il me semble que je te l'ai d�j� piqu� celui-l�.
C'est pas celui avec deux rectangles bleus et rouge?
h�h� bon je jette un oeil.merci
04/07/2006, 16h19
SpaceFrog

lol oui c'est celui l� ...
04/07/2006, 16h20
speedev

Ouais je l'ai d�j� lol, en fait je m'int�resse plus aux affichages de div progressivement, tu vois? Comme le menu liens rapides ici pr�sent. Je trouve �a tr�s beau et relativement l�ger!

En gros les d�placements/affichages
Je sais pas trop comment appeler �a mais j'en vois assez souvent sur le net mais rarement bien d�velopp�.
04/07/2006, 16h26
SpaceFrog

suffit juste de faire de fonctions de deplacement ... et d'autres d'affichage masquage ...
04/07/2006, 16h31
speedev

Franchement j'ai pas mis le nez une seule fois dans ce type de fonction parceque je trouvais �a compl�tement inutile.
Mais j'ai chang� d'avis, j'vais animer qlq peu ici et l� des menus ou des div pour cacher/stocker des infos comme des infos-bulle.

Bon t'as l'air de dire que �a n'a pas l'air bien compliqu� � bidouiller alors j'vais me d�brouiller, mais si tu connais l'adresse d'un site sp�cialis� dans le genre ou qui a qlq exemples ou tutoriaux...je ne crois pas avoir vu �a ici.

celui l� tu connais ?

Code:

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 2</title>
<script language="Javascript">
var timer;
var position= new Array(2);
var MyWay;
 
function movearound(thisway)
{ 
position[0] = parseInt(document.getElementById('MyDiv').style.top);
position[1] = parseInt(document.getElementById('MyDiv').style.left); 
 
switch(thisway)
{
case "up":
   position[0] -= 2;
   break;
 
case "do":
   position[0] += +2;
   break;
 
case "le":
   position[1] -= 2;
   break;
case "ri":
   position[1] += +2;
   break;
}
 
 
document.getElementById('MyDiv').style.top = Number(position[0]); 
document.getElementById('MyDiv').style.left = Number(position[1]);
} 
 
</script> 
<style >
input {font-family: 'symbol';}
</style>
</head>
 
 
<body>
<div id="MyDiv" style="width: 39; height: 20; top:0; left:0; background-color: blue; position: absolute; z-index:-1;" ></div> 
 
 
  <table border="0" style="cellpadding:0; cellspacing:0; " width="90">
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="up" width=this.height value="Ý" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" ; / / / /></td>
      <td width="34%"></td>
    </tr>
    <tr>
      <td width="33%"><input type="button" name="le" width="100" value="Ü" onClick="a=this.name; clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="33%"><input type="button" width="100" value="&#128;" onClick="clearInterval(timer);" /></td>
      <td width="34%"><input type="button" name="ri" width="100" value="Þ" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
    </tr>
    <tr>
      <td width="33%"></td>
      <td width="33%"><input type="button" name="do" width="100" value="ß" onClick="a=this.name;clearInterval(timer); timer=setInterval('movearound(a)',10);" /></td>
      <td width="34%"></td>
    </tr>
  </table>
 
</html>

04/07/2006, 16h33
speedev

non mais il marche pas sur firefox lol