bug Classe drag

**varex** · 17/10/2008, 15h52

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

**le_chomeur** · 17/10/2008, 16h11

en fait dès que ta souris n'est plus au dessus de ton image tu ne la fais plus bouger

je regarde

**le_chomeur** · 17/10/2008, 16h15

remplace :

Code :

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

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

par :

Code :

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

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

**varex** · 17/10/2008, 16h33

j'ai fait un essaye en remplaçant les lignes suivantes :

Code :

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

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

par :

Code :

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

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.

**varex** · 17/10/2008, 17h48

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 :

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

bug Classe drag

JavaScript

Vue hybride

Discussions similaires

Partager

Partager