mouvements XY javascript

**speedev** · 04/07/2006, 16h08

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...

**SpaceFrog** · 04/07/2006, 16h12

un chtit code à étudier ça te tente ?

**speedev** · 04/07/2006, 16h12

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

netvibes.com pardon

**SpaceFrog** · 04/07/2006, 16h17

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
<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>

**speedev** · 04/07/2006, 16h18

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

**SpaceFrog** · 04/07/2006, 16h19

lol oui c'est celui là ...

**speedev** · 04/07/2006, 16h20

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é.

**SpaceFrog** · 04/07/2006, 16h26

suffit juste de faire de fonctions de deplacement ... et d'autres d'affichage masquage ...

**speedev** · 04/07/2006, 16h31

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.

**SpaceFrog** · 04/07/2006, 16h32

celui là tu connais ?

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
<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>

**speedev** · 04/07/2006, 16h33

non mais il marche pas sur firefox lol

mouvements XY javascript

JavaScript

Discussions similaires

Partager

Partager