[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

1
2
3
a{
	position : fixed;
}

par

Code css :

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

1
2
3
#test{
	position : fixed;
}

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

Merci pour la réponse, en effet il n'y a plus de problème une fois que le css est en place.

Un grand merci pour le tuto et vôtre aide

.

**newVison** · 05/07/2011, 11h49

Bonjour,

c'est encore moi

.

Je me suis servi du script pour ma zone d'administration.
L'admin se sert du drag & drop pour placer son image puis avec de l'ajax on envoie ses données à la bdd et lors de l'affichage de la page, pour les visiteurs on met l'image en absolute, et tout fonctionne à la perfection. Alors juste pour ça : encore merci pour le tuto

.

Mais j'ai intégré une deuxième image (dans le tuto vous en avez 2 : une en fixe et l'autre en absolute => pour ma part : 2absolute) et là c'est le hic. L'une fonctionne mais pas l'autre, alors que les deux indépendamment ne posent pas de problème

.

Est-ce qu'il peut y avoir conflit ?

Pour un petit bout de 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
 
 <style type="text/css">
 
			#divImg0{
				position : absolute;
			}
			#divImg1{
				position : absolute;
			}       
</style>
 
<body onLoad='onLoadJS()' >
...
<div id="divImg0" class=" ">
	<img src="./upload/img/mozilla_firefox.png" alt="mozilla_firefox.png">
</div>
<div id="divImg1" class=" ">
	<img src="./upload/img/bodycote.PNG" alt="bodycote.PNG">
</div> 
...
function onLoadJS(){	
	dragDrop.initElement('divImg0');
	dragDrop.initElement('divImg1');			
}
...
</body>

Je suppose que le problème vient du fait que je donne 2arguments différents à la même fonction.
Je voudrais donc savoir comment vous avez fait dans le tuto, car je n'arrive pas à trouver l'appel des fonctions.

Cordialement.
newVision

**newVison** · 05/07/2011, 16h57

Voici le code miracle

.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
//Côté Html
<div id="divImg0" class=" ">
     <img src="./upload/img/mozilla_firefox.png" alt="mozilla_firefox.png" onClick="dragDropInit('divImg0')">
</div>
 
//Côté javaScript
function dragDropInit(nomElement){
	dragDrop.initElement(nomElement);
}

Par contre il faut avoir 1seconde de patience

.

En effet, il faut cliquer une première fois sur l'image, attendre 1seconde (vous pouvez relacher le clic x), je pense que c'est le temps d’exécution du script). Et ensuite recliquer pour la déplacer

.
Mais ça marche pour x images ^^ .

**chatawak** · 19/07/2011, 21h01

Bonjour,

Ce script marche parfaitement, merci de l'avoir partagé et ce avec les explications.

Cependant j'ai un problème dans un cas: les ascenseurs dans les div que je souhaite pouvoir déplacer (avec un overflow à auto).
Si je clique avec le bouton gauche de la souris sur l'ascenseur, il remplit sa fonction.
Par contre dès que je relâche le bouton gauche de la souris la div se met à se déplacer sans qu'aucune action ne permette d'arrêter le déplacement.

Une idée pour que l'ascenseur ne soit pas pris en compte dans l'élément que je souhaite déplacer ?
Ou pour faire en sorte que le relâchement du bouton gauche de la souris soit bien pris en compte par le script ?

**newVison** · 29/07/2011, 10h49

Bonjour,

c'est encore moi

.

J'ai voulu mettre un textarea. Et ça marche à la perfection, pour ce qui est de le déplacer.
Mais par contre, ça en créer un autre à chaque clique

.

Est-ce que vous auriez une solution ?

Le script réagit ainsi dès qu'on met un élément du formulaire (input, select etc... ).

Mes excuses pour le dérangement que j'engendre une fois de plus

.

**newVison** · 19/08/2011, 14h26

Bonjour,

en relisant le tutoriel et plus précisément l'initialisation, je me suis aperçu qu'il fallait supprimer la ligne :

Code :

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

element.innerHTML += dragDrop.keyHTML;

De cette façon, la balise du textarea n'est pas ajoutée.
Cependant, ceci devrait avoir une incidence sur l'utilisation du clavier (d'après ce que j'ai pu comprendre avec le tutoriel).

En espérant que ceci aidera d'autres personnes

.

newVision

**freestyle83** · 30/01/2014, 13h22

Bonjour,

Merci pour ce tuto bien simpa et très clair.
Toutefois j'ai une question à poser. Les images s'affiche en taille réelle, comment faire pour les redimensionner??
Merci d'avance

[Article] Ajouter un drag and drop sur sa page

JavaScript

Discussions similaires

Partager

Partager