bouger une div selon les coordonnées de la souris

Version imprimable

:salut:

j'ai récupéré des scripts sur le net pour récupérer les coordonnées de la souris, je les affiche sans problème, ensuite je créé une div que je souhaite voir suivre la souris, sous IE pas de problème par contre sous FF ca en fonctionne pas :s

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
         function position(e)
         	{
         	x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
         	y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
         	document.getElementById('MouseFollow').style.visibility = 'visible';
         	document.getElementById('MouseFollow').style.left = x+20;
         	document.getElementById('MouseFollow').style.top = y+10;
         	}
         if(navigator.appName.substring(0,3) == "Net")
         	document.captureEvents(Event.MOUSEMOVE);
         document.onmousemove = position;
      </script>
 
<div id="MouseFollow" style="position:absolute;top:-50;visibility:hidden;height:15px; width:30px; background-color:#FFF;padding-left:2px;">
         test
      </div>

une idée ?

21/09/2005, 10h48
SpaceFrog

Code:

+ 'px'

?

ton div est il en position:absolute ?

heu j'ai rien dit :red:
21/09/2005, 10h50
10-nice

Le coup du px est bon ;) merci à toi ^^
21/09/2005, 11h48
javatwister

ah? chez moi, ton code fonctionne;

Salut fred :)

Ben le code fonctionnais sous IE et pas sous FF... bref c'est résolu et c'est plus propre avec une unité me semble-t-il.

Toujorus est-il que j'ai un nouveau problème, j'essaye de faire en sorte que ma div se déplace lorsque je reste cliqué dessus.

Ca fonctionne lors du premier déplacement mais plus si j'essaye de déplacer à nouveau...

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
<script type="text/javascript">
	      var Xdif = 0;
	      var Ydif = 0;
	      var click = false;
	      var divBouge = '';
         function position(e){
         	Xpos = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
         	Ypos = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
         	document.getElementById('MouseCoor').innerHTML = "X:"+Xpos+" / Y:"+Ypos;
         	if(click){
         	   var divStyle = document.getElementById(divBouge).style;
         	   divStyle.left = (Xpos - Xdif)+'px';
         	   divStyle.top = (Ypos - Ydif)+'px';
         	}
         }
 
         function move(div){
            var divStyle = document.getElementById(div).style;
            Xdif = Xpos - divStyle.left;
            Ydif = Ypos - divStyle.top;
            divBouge = div;
            click = true;
         }
 
         function stay() {
            click = false;
            alert('tewt');
         }
 
         if(navigator.appName.substring(0,3) == "Net")
         	document.captureEvents(Event.MOUSEMOVE);
         document.onmousemove = position;
      </script>
 
<div id="MouseFollow" style="position:absolute;height:150px; width:300px; background-color:#FFF;padding-left:2px;cursor:pointer;"
           onmousedown="javascript : move('MouseFollow');"
           onmouseup="javascript : stay();">
         test
      </div>

Lorsque je passe un left:0 et un top:0 directement dans ma div je ne peux plus déplacer ma div au premier coup... je pense que ca vient de ca...

une idée?

21/09/2005, 14h17
SpaceFrog

Jt tu as ton lien vers le drag and drop ?

ha voilà j'ai retrouvé ...

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

21/09/2005, 14h27
10-nice

Vachte ca fait sacrément long comme code :lol:

Je vais tester et essayer d'adapter mais je pense qu'il n'est pas obligatoire de passer par des classes.

Un collègue m'a aidé et a modifié un peu mon code, ca fonctionne désormais ;)

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
<script type="text/javascript">
	      var gX = 0;
	      var gY = 0;
	      var gDifX = 0;
	      var gDifY = 0;
 
	      var moveElement = null;
 
         function position(e){
         	gX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
         	gY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
         	document.getElementById('MouseCoor').innerHTML = "X:"+gX+" / Y:"+gY;
 
         	if(moveElement != null){
      	      moveElement.style.left = (gX - gDifX)+'px';
      	      moveElement.style.top = (gY - gDifY)+'px';
         	}
 
         }
 
         function startMoving(element){
            gDifX = parseInt(element.style.left);
            gDifX = gX - ( isNaN(gDifX) ? 0 : gDifX) ;
 
            gDifY = parseInt(element.style.top);
            gDifY = gY - ( isNaN(gDifY) ? 0 : gDifY) ;
            moveElement = element;
         }
 
         function stopMoving() {
            moveElement = null;
         }
 
         if(navigator.appName.substring(0,3) == "Net")
         	document.captureEvents(Event.MOUSEMOVE);
         document.onmousemove = position;
      </script>

(sans oublier de fixer un left et un top sinon bug sous IE ^^)

21/09/2005, 15h13
javatwister

SF, c'est pas moi ce truc :? mais il me semble l'avoir déjà vu pourtant...

je pense que c'est à toi :lol:
21/09/2005, 15h18
SpaceFrog

non non je te garantis ce n'est pas à moi , il me semble pourtant bien que c'est un vieux bout de code que tu m'avais filé en exemple ...
21/09/2005, 15h22
javatwister

impossible!

les majuscules dans un nom de fonction, "x" ou "id" comme nom de propriété, ... la complexité du code ... :mrgreen: ... tout ça ne me ressemble pas;
21/09/2005, 15h31
SpaceFrog

un moment dégarement peut être JT :lolgreen: