bonjour,

j'ai crée une classe qui permet de déplacer un élément.
Seulement voila, lorsque je veux la tester avec une image, cela fonctionne pas comme prévu.

Lorsque je clique et garde la souris enfoncée sur une image et que je bouge la souris, l'image se déplace de quelques pixels puis plus rien.
Je lâche ma souris et sans que celle ci soit enfoncée, lorsque je vais sur l'image et que je bouge la souris, j'arrive à la déplacer (l'image).
Pour annuler le déplacement, il faut que je clique sur l'image.

j'aimerai bien que quelqu'un m'explique pourquoi cela fonctionne pas.

voici le code :

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
 
<html>
<head>
	<title>Drag</title>
	<script type="text/javascript">
		function drag(id) {
 
			this.isdrag = false;
			this.target = document.getElementById(id);
			this.lambdaX = null;
			this.lambdaY = null;
			var _this = this;
 
			this.target.onmousedown=function (e) { _this.selectmouse(e) };
			this.target.onmouseup=function () { _this.isdrag = false;};
 
			this.selectmouse=function(e) {
				this.isdrag = true;
 
				tx = parseInt(this.target.style.left+0);
				ty = parseInt(this.target.style.top+0);
 
				if(navigator.appName != "Microsoft Internet Explorer") {
					x = e.clientX;
					y = e.clientY;
				} else {
					x = event.clientX;
					y = event.clientY;
				}
 
				this.lambdaX = tx - x;
				this.lambdaY = ty - y;
 
				this.target.onmousemove=function (e) { _this.movemouse(e); };
			}
 
			this.movemouse=function(e) {
			  if (this.isdrag) {
				if(navigator.appName != "Microsoft Internet Explorer") {
					this.target.style.left = this.lambdaX + e.clientX;
					this.target.style.top  = this.lambdaY + e.clientY;
				} else {
					this.target.style.left = this.lambdaX + event.clientX;
					this.target.style.top  = this.lambdaY + event.clientY;
				}
				return false;
			  }
			}
		}
	</script>
</head>
<body>
<img src="imageABouger.jpg" id="test" style="position:relative;"></img>
</body>
</html>
 
<script type="text/javascript">
new drag("test");
</script>
Merci de votre aide