[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

12/01/2010, 13h12	#1
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 079 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 079 Points : 64 455 Points : 64 455	Ajouter un drag and drop sur sa page 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/ __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

17/12/2010, 14h27	#2
brendufat Invité de passage Inscription : décembre 2008 Messages : 1 Détails du profil Informations personnelles : Localisation : France, Paris (Île de France) Informations forums : Inscription : décembre 2008 Messages : 1 Points : 1 Points : 1	PPK drag and drop 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)
	00

01/07/2011, 15h28	#3
newVison Invité régulier Étudiant Inscription : juillet 2011 Messages : 7 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juillet 2011 Messages : 7 Points : 8 Points : 8	Problème de code 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
	00

01/07/2011, 15h51	#4
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 079 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 079 Points : 64 455 Points : 64 455	Difficile à dire comme ça... Tu aurais une page d'exemple à fournir ? Au pire, as-tu une erreur signalée dans Firebug ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

01/07/2011, 16h18	#7
newVison Invité régulier Étudiant Inscription : juillet 2011 Messages : 7 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juillet 2011 Messages : 7 Points : 8 Points : 8	Problème résolu 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 .
	00

19/07/2011, 21h01	#10
chatawak Invité de passage Inscription : juillet 2011 Messages : 1 Détails du profil Informations forums : Inscription : juillet 2011 Messages : 1 Points : 1 Points : 1	Div et ascenseur 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 ?
	00

29/07/2011, 10h49	#11
newVison Invité régulier Étudiant Inscription : juillet 2011 Messages : 7 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juillet 2011 Messages : 7 Points : 8 Points : 8	Textarea : multiplication 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 .
	00

19/08/2011, 14h26	#12
newVison Invité régulier Étudiant Inscription : juillet 2011 Messages : 7 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juillet 2011 Messages : 7 Points : 8 Points : 8	Textarea : multiplication -> "solution" 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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email