drag and drop, select à l'intérieur du div draggable

Bonjour,

j'ai un code qui fonctionne depuis pas mal de temps, et qui vient d'ici.

J'ai donc une boite (div) qui est déplacable grâce au code JS Drag&Dop, et à l'intérieur de ce <div>, j'ai un mini formulaire avec un <select> et un <submit>.

Ca ne marche pas (plus) sur Firefox. Il me semble pourtant que ca a marché, mais comme c'est utilisé par les utilisateurs sur IE, je ne le découvre que maintenant.
Donc sur Firefox et sur Chrome : KO
Sur IE 9, OK
(j'aime pas du tout ca!)

"Ca ne marche pas" signifie que le click sur mon <select> ne déclenche pas l'ouverture de la liste déroulante car le code JS interprete le click comme un début de Drag, et ne laisse pas le reste se faire.

La page :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
		<script type="text/javascript" src="dragdrop.js"></script>
		<style type="text/css">
                body {
                        background-color : FEDCBA;
                        min-height : 600px;
                }
                #seb {
                        position : absolute;
                        top : 20px;
                        left : 20px;
                        border : 2px solid red;
                }
                </style>
	</head>
 
	<body>
 
		<div id="seb">
			bla bla bla bla bla bla bla bla bla bla <br />
			bla bla bla bla bla bla bla bla bla bla <br />
			bla bla bla bla bla bla bla bla bla bla <br />
			<select id="select_seb">
				<option value="1">option 1</option>
				<option value="2">option 2</option>
				<option value="2">option 3</option>
			</select>
			bla bla bla bla bla bla bla bla bla bla <br />
			bla bla bla bla bla bla bla bla bla bla <br />
			bla bla bla bla bla bla 
		</div>
 
		<script type="text/javascript">
                dragDrop.initElement('seb');
                </script>
	</body>
</html>

et le fichier JS "dragdrop.js" utilisé :

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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
dragDrop = {
	keyHTML: '<a href="#" class="keyLink">#</a>',
	keySpeed: 10, // pixels per keypress event
	initialMouseX: undefined,
	initialMouseY: undefined,
	startX: undefined,
	startY: undefined,
	dXKeys: undefined,
	dYKeys: undefined,
	draggedObject: undefined,
	initElement: function (element) {
		if (typeof element == 'string')
			element = document.getElementById(element);
		element.onmousedown = dragDrop.startDragMouse;
		element.innerHTML += dragDrop.keyHTML;
		var links = element.getElementsByTagName('a');
		var lastLink = links[links.length-1];
		lastLink.relatedElement = element;
		lastLink.onclick = dragDrop.startDragKeys;
	},
	startDragMouse: function (e) {
		dragDrop.startDrag(this);
		var evt = e || window.event;
		dragDrop.initialMouseX = evt.clientX;
		dragDrop.initialMouseY = evt.clientY;
		addEventSimple(document,'mousemove',dragDrop.dragMouse);
		addEventSimple(document,'mouseup',dragDrop.releaseElement);
		return false;
	},
	startDragKeys: function () {
		dragDrop.startDrag(this.relatedElement);
		dragDrop.dXKeys = dragDrop.dYKeys = 0;
		addEventSimple(document,'keydown',dragDrop.dragKeys);
		addEventSimple(document,'keypress',dragDrop.switchKeyEvents);
		this.blur();
		return false;
	},
	startDrag: function (obj) {
		if (dragDrop.draggedObject)
			dragDrop.releaseElement();
		dragDrop.startX = obj.offsetLeft;
		dragDrop.startY = obj.offsetTop;
		dragDrop.draggedObject = obj;
		obj.className += ' dragged';
	},
	dragMouse: function (e) {
		var evt = e || window.event;
		var dX = evt.clientX - dragDrop.initialMouseX;
		var dY = evt.clientY - dragDrop.initialMouseY;
		dragDrop.setPosition(dX,dY);
		return false;
	},
	dragKeys: function(e) {
		var evt = e || window.event;
		var key = evt.keyCode;
		switch (key) {
			case 37:	// gauche
			case 63234:
				dragDrop.dXKeys -= dragDrop.keySpeed;
				break;
			case 38:	// haut
			case 63232:
				dragDrop.dYKeys -= dragDrop.keySpeed;
				break;
			case 39:	// droite
			case 63235:
				dragDrop.dXKeys += dragDrop.keySpeed;
				break;
			case 40:	// bas
			case 63233:
				dragDrop.dYKeys += dragDrop.keySpeed;
				break;
			case 13: 	// Touche Entrée
			case 27: 	// Touche Echap.
				dragDrop.releaseElement();
				return false;
			default:
				return true;
		}
		dragDrop.setPosition(dragDrop.dXKeys,dragDrop.dYKeys);
		if (evt.preventDefault)
			evt.preventDefault();
		return false;
	},
	setPosition: function (dx,dy) {
		dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px';
		dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px';
	},
	switchKeyEvents: function () {
		// for Opera and Safari 1.3
		removeEventSimple(document,'keydown',dragDrop.dragKeys);
		removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
		addEventSimple(document,'keypress',dragDrop.dragKeys);
	},
	releaseElement: function() {
		removeEventSimple(document,'mousemove',dragDrop.dragMouse);
		removeEventSimple(document,'mouseup',dragDrop.releaseElement);
		removeEventSimple(document,'keypress',dragDrop.dragKeys);
		removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
		removeEventSimple(document,'keydown',dragDrop.dragKeys);
		dragDrop.draggedObject.className = dragDrop.draggedObject.className.replace(/dragged/,'');
		dragDrop.draggedObject = null;
	}
}
 
function addEventSimple(obj,evt,fn) {
	if (obj.addEventListener)
		obj.addEventListener(evt,fn,false);
	else if (obj.attachEvent)
		obj.attachEvent('on'+evt,fn);
}
 
function removeEventSimple(obj,evt,fn) {
	if (obj.removeEventListener)
		obj.removeEventListener(evt,fn,false);
	else if (obj.detachEvent)
		obj.detachEvent('on'+evt,fn);
}

Merci de votre aide

je ne sais pas si tu a vue mais quand tu clique sur le select il rajoute une class dragged sur la div #seb, ce qui permet de déplacer la div.

Je pense que vue que ton select est à l'intérieur de cette div il annule la fonction du select par défaut car dès que tu relache le select il enlève la class

Bonjour,
teste en supprimant le return false dans la méthode startDragMouse, peut être que cela sera suffisant.

bonjour,
merci pour vos réponses.
Je crois que j'ai deja essayé d'enlever le return false parce que je pensais bien que le comportement standard était bloqué par là, mais ca n'avait rien donné
(je suis pas devant mon PC, je vais quand meme retester ca dès que possible).

Code:

element.onmousedown = dragDrop.startDragMouse;

Le drag de l'élément est déclenché par l'événement mousedown, or comme la liste est comprise dans l'élément, l'événement va se propager et déclencher la fonction

Code:

startDragMouse: function (e) {...}

or comme celle-ci renvoie false, c'est l'explication du pourquoi tu ne peux plus intéragir avec le formulaire.
Supprimer le return false n'est pas la solution, car tu auras deux comportements simultanés et incohérents entre eux : l'interaction avec le formulaire et le drag.

En fait, ce qu'il faut faire, c'est détecter en tout début de fonction quel élément a reçu l'événement et, s'il s'agit d'un élément de formulaire, faire un return true de façon à stopper l'exécution de la fonction tout en conservant la suite dévénements de la souris lors du clic :
Code:

1 2 3 4 5 6 7 8 startDragMouse: function (e) { var elt = e ? e.target : event.srcElement; elt = elt.nodeName.toLowerCase(); if(elt == 'select' || elt == 'input'){ return true; } // Reste du code }

CQFD

merci patron !