[HTML 5] Drag & Drop (FF, IE, CH) [Résolu]

SilaanFR · 18/07/2011, 13h03

Bonjour,

j'étudie actuellement le moyen de mettre des fonctionnalités de drag and drop sur une application web et j'aurai aimé échanger à ce sujet. J'ai suivi quelques tutoriels, parcouru quelques forums (dont celui de developpez.com), mais je n'arrive pas à voir si c'est moi qui ai omis quelque chose où c'est Firefox 5.0 qui a un petit soucis.

Mon soucis étant que le résultat de ce code, ne fournit pas le résultat attendu :

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
<html>
	<head>
		<title>Draggable tags</title>
		<style type="text/css"></style>
		<script type="text/javascript">				
			function handleDragStart(e) {
			  // alert('you drag');
			  this.style.opacity = '0.4';  // this / e.target is the source node.
			  //return true;
			}
			</script>
	</head>
<body>
 
<a href="#">no draggable</a><br/>
<a href="#" draggable="true" ondragstart="handleDragStart(event)">draggable true</a><br/>
<a href="#" draggable="false">draggable false</a><br/>
 
<ul>
	<li>liste no draggable</li>
	<li draggable="true" ondragstart="handleDragStart(event)">liste draggable true</li>
	<li draggable="false">liste draggable false</li>
</ul>
 
<div id="columns">
  <div class="column"><header>no draggable</header></div>
  <div class="column" draggable="true" ondragstart="handleDragStart(event)"><header>draggable true 1</header></div>
  <div class="column" draggable="true" ondragstart="handleDragStart(event)"><header>draggable true 2</header></div>
  <div class="column" draggable="false"><header>draggable false</header></div>
</div>
 
</body>
</html>

Je m'attendais à voir le ghost de l'élément déplacé, pour indiquer que l'élément est bien en cours de déplacement, mais rien...

- avec IE 7 : ça marche pas, mais il semble que des scripts existent
- avec Chrome 12.0.742.122 : pas de soucis, appel de la fonction
- avec Firefox 5.0 : appel de la fonction, mais problème ci dessus

Du coup je partage mes quelques liens à ce sujet :
http://www.whatwg.org/specs/web-apps...e/dnd.html#dnd
http://html5doctor.com/native-drag-and-drop/
http://www.tutorialspoint.com/html5/html5_drag_drop.htm
http://www.html5rocks.com/en/tutorials/dnd/basics/

Bonne journée

PS : j'espère être au bon endroit pour poster.

SilaanFR · 19/07/2011, 10h52

Du coup, je fais la réponse.

Mon problème venait du fait que je n'avais pas encore défini d'élément qui écoutait l'évènement drop. Et du coup cela fonctionne correctement sous FF.

Pour ceux qui tomberaient par hasard sur ce post et qui voudrait un exemple de l'utilisation des drag and drop natif HTML5, je laisse ma modeste contribution.

L'intérêt de ce script réside dans le fait qu'il est possible d'observer l'ensemble des phases de la fonctionnalité (dragstart, dragover, dragenter, dragleave, drop, dragend).

Le système de transfert de donnée est pas terrible, mais je n'en suis qu'à la découverte...

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
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
150
151
152
153
154
155
156
157
 
<html>
<head>
<title>Drop Form</title>
<style type="text/css">
.dropBox {
	height: 50px;
	width: 50px;
	float: left;
	border: 2px solid #666666;
	background-color: #ccc;
	margin-right: 5px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 3px #000;
	box-shadow: inset 0 0 3px #000;
	text-align: center;
}
 
.box {
	height: 50px;
	width: 50px;
	float: left;
	border: 2px solid #666666;
	background-color: #ccc;
	margin-right: 5px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 3px #000;
	box-shadow: inset 0 0 3px #000;
	text-align: center;
	cursor: move;
}
</style>
 
<script type="text/javascript">
 
//////////////////////////
// traitement des données
 
function findData(divInnerHTML) {
	// recupere les donnees dans le contenu du div formatees ainsi : 
	// @@attr1::value1@@attr2::value2@@...@@attrN::valueN@@
	var indexFirst = divInnerHTML.indexOf("@@");
	var indexLast = divInnerHTML.lastIndexOf("@@");
	var dataStr = divInnerHTML.substring(indexFirst+2, indexLast);
	console('findData : '+divInnerHTML+' f:'+indexFirst+' l:'+indexLast+' d:'+dataStr);
	return dataStr;
}
 
function setDataForm(dataTransmitDrop) {
	var tabData = dataTransmitDrop.split("@@");
 
	var tabNom = tabData[0].split("::");
	document.getElementById('nom').value=tabNom[1];
 
	var tabPrenom = tabData[1].split("::");
	document.getElementById('prenom').value=tabPrenom[1];
 
	console('setDataForm : '+tabNom[1]+' '+tabPrenom[1]);
	return true;
}
 
function console(affiche) {
	var content = document.getElementById('consoleDiv').innerHTML;
	document.getElementById('consoleDiv').innerHTML = content+'<br/>'+affiche;
}
 
function afficheEvent(e) {
	var affiche = '';
	affiche += 'type:'+e.type;
	affiche += ' target:'+e.target;
	return affiche;
}
 
//////////////////////////////////////////
// gestion de l'objet draggable de droite
 
function handleDragStart(e) {
	e.dataTransfer.effectAllowed = 'move';
	var dataTransmitDrag = findData(e.target.innerHTML);
	e.dataTransfer.setData('text/html', dataTransmitDrag);
	console('handleDragStart '+dataTransmitDrag);
}
 
function handleDragOver(e) {
	if (e.preventDefault) { e.preventDefault();}
	e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
	console('handleDragOver');
	return false;
}
 
function handleDragEnter(e) {
	console('handleDragEnter');
}
 
function handleDragLeave(e) {
	console('handleDragLeave');
}
 
function handleDrop(e) {
	if (e.stopPropagation) {e.stopPropagation();}
	console('handleDrop '+dataTransmitDrop);
	return false;
}
 
function handleDragEnd(e) {
	console('handleDragEnd');
}
 
//////////////////////////////////////////
// gestion de l'objet draggable de gauche
 
function handleDragOver2(e) {
	if (e.preventDefault) { e.preventDefault();}
	e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
	console('handleDragOver2');
	return false;
}
 
function handleDrop2(e) {
	if (e.stopPropagation) {e.stopPropagation();}
	var dataTransmitDrop = e.dataTransfer.getData('text/html');	
	setDataForm(dataTransmitDrop);
	console('handleDrop2 '+dataTransmitDrop);
	return false;
}
 
</script>
 
</head>
<body>
 
<table><tr><td>
	<form>
	<fieldset>
	<legend>Formulaire d'inscription :</legend>
		<table>
		<tr><td>Nom: <input id="nom" name="nom" type="text" size="30" /></tr></td>
		<tr><td>Prénom: <input id="prenom" name="prenom" type="text" size="30" /></tr></td>
		<tr><td><div id="dropBox" name="dropBox" class="dropBox" draggable="true" ondragover="handleDragOver2(event);" ondrop="handleDrop2(event);">DROP HERE</div></tr></td>
		</table>
	</fieldset>
	</form>
</td><td>
	<div id="dataSource" name="dataSource" class="box" draggable="true" ondragstart="handleDragStart(event);" ondragenter="handleDragEnter(event);" ondragover="handleDragOver(event);" ondragleave="handleDragLeave(event);" ondragleave="handleDragLeave(event);" ondragend="handleDragEnd(event);" ondrop="handleDrop(event);">
		DRAG HERE
		<input type="hidden" value="@@nom::Douris@@prenom::John@@"/>
	</div>
</td></tr></table>
 
<div id="consoleDiv" name="consoleDiv"></div>
 
</body>
</html>

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