bug Classe drag

Version imprimable

bug Classe drag

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:

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

17/10/2008, 16h11
le_chomeur

en fait dès que ta souris n'est plus au dessus de ton image tu ne la fais plus bouger :)
je regarde
17/10/2008, 16h15
le_chomeur

remplace :

Code:

this.target.onmousemove=function (e) { _this.movemouse(e); };

par :

Code:

document.onmousemove=function (e) { _this.movemouse(e); };

tu ne gérais la souris que sur ton élément :)

par contre un bug apparait ( que j'ai eu aussi mais pas réussis a résoudre je te laisse découvrir ) les éléments déplacé le sont correctement la première fois mais après un bug étrange apparait
17/10/2008, 16h33
varex
j'ai fait un essaye en remplaçant les lignes suivantes :
Code:

1 2 3 this.target.onmousedown=function (e) { _this.selectmouse(e) }; this.target.onmouseup=function () { _this.isdrag = false;};
par :
Code:

1 2 3 document.onmousedown=function (e) { _this.selectmouse(e) }; document.onmouseup=function () { _this.isdrag = false;};
et donc, lorsque je clique et reste enfoncé oà il y a pas l'image et que je bouge la souris, l'image bouge normalement.

mais lorsque je clique sur la souris, le problème persiste.

J'ai détourné le problème en ne faisant plus un drag sur une balise image mais sur un div avec comme style un background qui est l'image.

voici le code (j'en ai profité pour l'améliorer) :

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
 
<html>
<head>
	<title>Drag</title>
	<style type="text/css">
	#test {
		width:200px;
		height:235px;
		position:relative;
		background:url(imageADeplacer.jpg); 
	}
	</style>
	<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) {
				var e = e || window.event;
				this.isdrag = true;
				this.lambdaX = parseInt(this.target.style.left+0) - e.clientX;
				this.lambdaY = parseInt(this.target.style.top+0)  - e.clientY;
				document.onmousemove    = function (e) { _this.movemouse(e);   };
			}
 
			this.movemouse=function(e) {
				if (this.isdrag) {
					var e = e || window.event;
					this.target.style.left = this.lambdaX + e.clientX;
					this.target.style.top  = this.lambdaY + e.clientY;
				}
			}
		}
	</script>
</head>
<body>
	<div id="test"></div>
</body>
</html>
 
<script type="text/javascript">
new drag("test");
</script>

Mantenant, ca fonctionne.

Mais le mystère reste entier pour les balises img.