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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
---
title: DataTransfer.clearData()
slug: Web/API/DataTransfer/clearData
tags:
- API
- HTML DOM
- Method
- Reference
- drag and drop
translation_of: Web/API/DataTransfer/clearData
---
<div>{{APIRef("HTML Drag and Drop API")}}</div>
<p>La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet.</p>
<div class="note">
<p><strong>Note :</strong> Si cette méthode est appelée sans argument, ou que le format donné est une {{domxref("DOMString","chaîne de caractères")}} vide, les données de tous les formats seront retirées.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">void <var>dataTransfer</var>.clearData([format]);
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt>format{{optional_inline}}</dt>
<dd>Une {{domxref("DOMString","chaîne de caractères")}} représentant le format de donnée à retirer.</dd>
</dl>
<h3 id="Valeur_de_retour">Valeur de retour</h3>
<p>Void.</p>
<h2 id="Exemple">Exemple</h2>
<p>Cette exemple illustre l'utilisation des méthodes {{domxref("DataTransfer.getData()","getData()")}}, {{domxref("DataTransfer.setData()","setData()")}} et {{domxref("DataTransfer.clearData()","clearData()")}} de l'objet {{domxref("DataTransfer")}}.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><span class="tweaked" id="source" draggable="true">
Sélectionnez cet élément, glissez-le et déposez-le dans la Zone de Dépose pour le déplacer.
</span>
<span class="tweaked" id="target">Zone de Dépose</span>
<div>Status: <span id="status">Glissez pour démarrer</span></div>
<div>Data is: <span id="data">non initialisé</span></div>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">span.tweaked {
display: inline-block;
margin: 1em 0;
padding: 1em 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</pre>
<h3 id="JavaScript">JavaScript</h3>
<pre class="brush: js">window.addEventListener('DOMContentLoaded', function () {
// Séléctionner les éléments HTML
var draggable = document.getElementById('source')
var dropable = document.getElementById('target')
var status = document.getElementById('status')
var data = document.getElementById('data')
var dropped = false
// Enregistrer les évènements
draggable.addEventListener('dragstart', dragStartHandler)
draggable.addEventListener('dragend', dragEndHandler)
dropable.addEventListener('dragover', dragOverHandler)
dropable.addEventListener('dragleave', dragLeaveHandler)
dropable.addEventListener('drop', dropHandler)
function dragStartHandler (event) {
status.innerHTML = 'Glisse en cours'
// Modifier la bordure de l'élément pour indiquer qu'une opération de glisse a démarré
event.currentTarget.style.border = '1px dashed blue'
// Définir le type et la donnée associée à l'opération de glisse (utilise l'ID de la cible de l'évènement pour la donnée)
event.dataTransfer.setData('text/plain', event.target.id)
data.innerHTML = event.dataTransfer.getData('text/plain')
}
function dragEndHandler (event) {
if (!dropped) {
status.innerHTML = 'Glisse annulée'
}
data.innerHTML = event.dataTransfer.getData('text/plain') || 'vide'
// Modifier la bordure de l'élément pour indiquer que l'opération de glisse n'est plus en cours
event.currentTarget.style.border = '1px solid black'
if (dropped) {
// Retirer tous les évènements enregistrés précédemment
draggable.removeEventListener('dragstart', dragStartHandler)
draggable.removeEventListener('dragend', dragEndHandler)
dropable.removeEventListener('dragover', dragOverHandler)
dropable.removeEventListener('dragleave', dragLeaveHandler)
dropable.removeEventListener('drop', dropHandler)
}
}
function dragOverHandler (event) {
status.innerHTML = 'Dépose disponible'
event.preventDefault()
}
function dragLeaveHandler (event) {
status.innerHTML = 'Glisse en cours (la dépose était disponible)'
event.preventDefault()
}
function dropHandler (event) {
dropped = true
status.innerHTML = 'Dépose effectuée'
event.preventDefault()
// Récupérer la donnée liée au type « text/plain »
var _data = event.dataTransfer.getData('text/plain')
var element = document.getElementById(_data)
// Insérer l'élément source de l'opération de glisse en tant que dernier enfant de l'élément cible de l'opération de dépose
event.target.appendChild(element)
// Modifier les styles CSS et le texte affiché
element.style.cssText = 'border: 1px solid black;display: block; color: red'
element.innerHTML = "J'suis dans la Zone de Dépose !"
// Effacer les données de TOUS les types liés à l'opération de glisse (car on n'a pas donné de paramètre)
event.dataTransfer.clearData()
}
})
</pre>
<p>{{EmbedLiveSample('Exemple', 300, 250)}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité">Compatibilité</h2>
<p>{{Compat("api.DataTransfer.clearData")}}</p>
<h2 id="À_voir_également">À voir également</h2>
<p>{{page("/fr/docs/Web/API/DataTransfer", "See also")}}</p>
|
