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

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:

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>