Discussion :

[10-nice]

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 :

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

[SpaceFrog]

Code :

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

+ 'px'

?

ton div est il en position:absolute ?

heu j'ai rien dit :red:

[10-nice]

Le coup du px est bon merci à toi ^^

[javatwister]

ah? chez moi, ton code fonctionne;

[10-nice]

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 :

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

[SpaceFrog]

Jt tu as ton lien vers le drag and drop ?

[SpaceFrog]

ha voilà j'ai retrouvé ...

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>

Tous droits réservés Javatwister

[10-nice]

Vachte ca fait sacrément long comme code

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

[10-nice]

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

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

[javatwister]

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

je pense que c'est à toi

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

[javatwister]

impossible!

les majuscules dans un nom de fonction, "x" ou "id" comme nom de propriété, ... la complexité du code ... ... tout ça ne me ressemble pas;

[SpaceFrog]

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