drag and drop Internet Explorer

**julien1451** · 14/01/2010, 12h50

Bonjour à tous, voilà je suis en train de créer un script afin de réaliser une scrollbar mais je me retrouve confronté à un problème que j'ai résolu sous Firefox mais je n'arrive pas à le résoudre sur Internet Explorer. Pour le moment, il s'agit d'une image que je fais bouger en X et en Y. J'ai réussi à désactiver le drag and drop navigateur sur Firefox grace à addEventListener et event.preventDefault() mais sur Internet Explorer il s'agit des méthodes attachEvent et event.returnValue=false. Je pense que je n'utilise pas correctement ces méthodes. Pouvez vous m'aidez à résoudre se problème car la je suis un peu bloqué malgrès mes diverses recherche sur google svp ? Merci d'avance.

voici mon 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
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
<html>
	<head>
		<title>test</title>
		<style type="text/css">
			#logo
			{
				position:absolute;
			}
		</style>
 
 
		<script type="text/javascript">
			var scrollbar=false;
 
			function init()
			{
				if(!navigator.appName=="Microsoft Internet Explorer")
					document.addEventListener("mousedown",dep_image,false);
				else
					document.getElementById("logo").attachEvent("onMouseDown", dep_image);
			}
 
 
			function dep_image(event)
			{
 
 
 
				/*permet de supprimmer le drag and drop du navigateur*/
					if(event.preventDefault)
					{
							event.preventDefault();
					}
 
					event.returnValue = false;
 
					/*Lorsque l'évènement survient on fait appel à la fonction position*/
					document.onmousemove=position;
			}
 
			function position(ev)
			{				
				if(scrollbar==true)
				{
					var coordX;
					var coordY;
 
 
					if(navigator.appName=="Microsoft Internet Explorer")
					{
						/*on récupère la position en X et en Y de la souris*/
						coordX=window.event.clientX;
						coordY=window.event.clientY;
 
						document.getElementById("position_souris").innerHTML="X="+coordX+"Y="+coordY;
					}
					else
					{
						/*on récupère la position en X et en Y de la souris*/
						coordX=ev.clientX;
						coordY=ev.clientY;
						document.getElementById("position_souris").innerHTML="X="+coordX+"Y="+coordY;
					}
 
					/*comme le curseur de la souris accroche au coin en haut à gauche, je retire la moitié
					de la taille de l'image pour placer le curseur au centre*/
					coordY=coordY-64;
					coordX=coordX-64;
 
					/*on affecte ensuite l'émargement haut et gauche de l'image à la position de la souris*/
					document.getElementById("logo").style.marginTop=coordY+"px";
					document.getElementById("logo").style.marginLeft=coordX+"px";
 
				}
			}
 
			function stop_dep()
			{
				document.onmousemove=null;
			}
 
			function activer_scrollbar()
			{
				/*permet de s'assurer que l'utilisateur a bien le clic enfoncé sur la barre de défilement*/
				scrollbar=true;
			}
 
			function desactiver_scrollbar()
			{
				/*lorsque l'utilisateur a relaché le clic on désactive le défilement*/
				scrollbar=false;
			}
 
 
		</script>
	</head>
	<body onLoad="init();" onMouseDown="dep_image(event);" onMouseUp="stop_dep();">
		<img id="logo" src="logo-ubuntu.png" onMouseDown="activer_scrollbar();" onMouseUp="desactiver_scrollbar();" />
		<div id="position_souris"></div>
 
 
 
	</body>
</html>

**RomainVALERI** · 14/01/2010, 13h22

même si tu es passé par la propriété returnValue de l'event, as-tu essayé un simple return false; à la fin de ton gestionnaire d'événement ?

**julien1451** · 14/01/2010, 13h29

c'est bon j'ai enfin trouver en fait il fallait placer le returnValue dans la fonction position(ev) et j'ai rajouté au dessus ev=ev||window.event.

**Troudhyl** · 28/02/2010, 10h54

Bonjour,

Pourrais-tu remettre ton code complet avec la solution ? J'ai essayé de faire ce que t'as dit mais sans succès...

Merci d'avance.

Edit : Bon en fait j'ai fait très simple : aucun returnValue (juste le code avec les preventDefault() pour FF), et j'ai rajouté ondragstart="return false" aux images et onselectstart="return false" au bloc contenant l'image.

Code Javascript :

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

1
2
3
4
5
function init() {
    if (document.addEventListener) {
        document.addEventListener("mousedown", imageBox, false);
    }
}

Code Javascript :

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

1
2
3
4
5
6
function imageBox(oevent) {
    if (oevent.preventDefault) {
        oevent.preventDefault();
    }
    // CODE //
}

Code HTML :

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

1
2
3
<td id="TDimg" ... onselectstart="return false">
    <img src="..." ... onload="javascript:init()" ondragstart="return false" />
</td>

drag and drop Internet Explorer

JavaScript

Discussions similaires

Partager

Partager