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

**sebhm** · 15/02/2013, 17h40

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 html :

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
<!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 :

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

**steel-finger** · 15/02/2013, 18h27

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

**NoSmoking** · 15/02/2013, 18h50

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

**sebhm** · 15/02/2013, 21h29

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

**Bovino** · 15/02/2013, 21h46

Code :

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

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 :

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

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 :

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

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
}

**sebhm** · 15/02/2013, 23h24

CQFD

merci patron !

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

JavaScript

Discussions similaires

Partager

Partager