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

Vue hybride

Discussions similaires

Partager

Partager