[Article] Ajouter un drag and drop sur sa page

**Bovino** · 12/01/2010, 13h12

Je vous propose une traduction d'un tutoriel de Peter-Paul Koch : Drag and drop.

Ce tutoriel vous présente comment implémenter une fonctionnalité de drag and drop. Cette fonction prend en charge la gestion de la souris mais aussi du clavier.

N'hésitez pas à faire part de vos remarques concernant cet article.

http://ppk.developpez.com/tutoriels/...ur-votre-site/

**brendufat** · 17/12/2010, 14h27

Bonjour,
je viens de m'en servir.
Excellent article : non seulement ça marche mais on comprend pourquoi ! Compliments pour la traduction fluide et claire (si,si, ce n'est pas toujours le cas)

**newVison** · 01/07/2011, 15h28

Bonjour,

j'ai :
-créé un page ne contient pas d'autre code
-suivi les 6 étapes données dans la rubrique : "Utilisation".
-récupérer le code du premier exemple (id='test')

et pourtant quand je clique sur la div rien ne fonctionne contrairement à vôtre exemple

.

Je ne vois donc qu'une seule erreur possible : l'appel de la fonction init.

Je l'ai placé ici :

Code :

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

<body onLoad="dragDrop.initElement('test')">

et j'ai aussi essayé juste au dessus du code que vous demandez de copier.

Mais aucun résultat.
J'ai alors placé une balise alert() pour tester l'appel de la fonction et celle-ci ne pose pas de problème.

Auriez vous une idée ? (Je suis sous mozila firefox 5.0)

Cordialement.
newVision

**Bovino** · 01/07/2011, 15h51

Difficile à dire comme ça...
Tu aurais une page d'exemple à fournir ?
Au pire, as-tu une erreur signalée dans Firebug ?

**newVison** · 01/07/2011, 16h03

Je vous présente mes excuses pour l'affichage brute, mais la balise code m'a gérer une multitude d'erreur php x) .

Sinon il y avait bien un message d'erreur disant que dragDrop n'était pas défini. Je ne vois pas pourquoi oO.

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
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Test</title>
		<STYLE type="text/css">
			a{
				position : fixed;
			}
 
			div{
				border : 2px solid blue;
				width : 210px;
			}
		</STYLE>
	</head>
 
	<body onLoad="dragDrop.initElement('test')">
		<div id="test" class=" ">
			Exemple de drag and drop, élément en
			<code>position: fixed</code>
			.
			<a class="keyLink" href="#">#</a>
		</div>
 
		<script language="Javascript">
 
 
 
		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);
}
		</script>
	</body>
</html>

**Bovino** · 01/07/2011, 16h14

Le lien (#) est ajouté automatiquement par le script, il ne faut donc pas l'inclure dans la page.
D'autre part, c'est la div test qu'il faut mettre en absolute, pas le lien.
Remplace dans le CSS

Code css :

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