deplacement de Div

**mp59100** · 15/04/2009, 00h05

Bonjour à tous,

voici mon code dont le but est de déplacer un div, mais celui-ci ne ce déplace pas et je ne sais pas pourquoi.

dans cette source j'ai mis deux balise div la premier sert de contrôle de la progression du déplacement de la souris qui fonctionne parfaitement

par contre la deuxième qui devrait bouger ne le fait pas.

merci pour vos explications

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
<script type="text/javascript">
 
var x = 0;
var y = 0;
 
if (document.getElementById)
{
   if(navigator.appName.substring(0,3) == "Net")   
    document.captureEvents(Event.MOUSEMOVE);
   document.onmousemove = Pos_Souris;
   window.onload = bouge;
}
 
function Pos_Souris(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;
}
 
posX = 0;
posY = 0;
 
function bouge(){
	if (document.getElementById) {
	 posX = posX+(((x-posX)+20)/15);
     posY = posY+(((y-posY)+20)/15);
  	 document.getElementById("coord1").innerHTML = posX;	
	 document.getElementById("bouge").style.left = posX;
	 document.getElementById("bouge").style.top = posY;
     tempo = setTimeout("bouge()", 15);
	}
}
 
</script>
 
</head>
 
<body>
 
<div id="coord1">.</div>
<div id="bouge" style="position:absolute">test</div>
 
</body>
</html>

**Bovino** · 15/04/2009, 06h47

Première chose :

Code :

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

if (document.getElementById)

quels sont les navigateurs qui ne reconnaissent pas getElementById ???
Ou pour reformuler, tu connais beaucoup de gens qui utilisent encore IE4

Ensuite, un script limité à IE, c'est un peu limitatif de nos jours !
Enfin, pour ton soucis, avec IE, event est une propriété de l'objet window, donc

Code :

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

1
2
3
4
5
6
function Pos_Souris(event)
var e = window.event;
{
  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;
}

**mp59100** · 15/04/2009, 09h03

Bonjour,

je prends note de tes remarques, cela dit cela ne fonctionne toujours ni sur ie et autre navigateur, le calque test reste figé. voici le code réécrit.

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
 
<script type="text/javascript">
 
var x = 0;
var y = 0;
 
if(navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = Pos_Souris;
window.onload = bouge;
 
 
function Pos_Souris(e)
{
  var e = window.event;
  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;
}
 
posX = 0;
posY = 0;
 
function bouge(){
 posX = posX+(((x-posX)+20)/15);
 posY = posY+(((y-posY)+20)/15);
 document.getElementById("coord1").innerHTML = posX;	
 document.getElementById("bouge").style.left = posX;
 document.getElementById("bouge").style.top = posY;
 tempo = setTimeout("bouge()", 15);
}
 
</script>

**andry.aime** · 15/04/2009, 09h11

Salut,

tempo = setTimeout("bouge()", 15);

avec 15 ms! ça bouffe de ressource processeur, en plus tu faits une boucle récursive,
utilise setInterval.

**Bovino** · 15/04/2009, 09h32

Code :

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

1
2
3
4
5
6
function Pos_Souris(e)
{
  var evt = window.event || e;
  x = (navigator.appName.substring(0,3) == "Net") ? evt.pageX : evt.x + document.body.scrollLeft;
  y = (navigator.appName.substring(0,3) == "Net") ? evt.pageY : evt.y + document.body.scrollTop;
}

Code :

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

1
2
3
4
5
6
7
8
function bouge(){
 posX = posX+(((x-posX)+20)/15);
 posY = posY+(((y-posY)+20)/15);
 document.getElementById("coord1").innerHTML = posX;	
 document.getElementById("bouge").style.left = posX + 'px';
 document.getElementById("bouge").style.top = posY + 'px';
 tempo = setTimeout("bouge()", 15);
}

Pour le setTimeout, prends en compte la remarque d'Andry

**mp59100** · 15/04/2009, 23h00

Bonjour,

Merci pour ta réponse, mon dysfonctionnement est dut au DOCTYPE
en ajoutant + "px" cela fonctionne parfaitement

cordialement,
MP

deplacement de Div

JavaScript

Discussions similaires

Partager

Partager