DataTransfer.clearData()
La méthode DataTransfer.clearData()
retire les données du type indiqué de l'opération de glisser-déposer. S'il n'existe pas de données pour le type indiqué, cette méthode n'a aucun effet.
Si cette méthode est appelée sans argument ou que le format est une chaîne de caractères DOMString
vide, la suppression des données concernera tous les types.
Cette méthode ne retire pas les fichiers de l'opération de glisser-déposer et il est donc possible d'avoir un élément restant avec le type Files
dans la liste DataTransfer.types
si des fichiers font partie du glisser-déposer.
Note : Cette méthode peut uniquement être utilisée dans le gestionnaire d'évènement pour dragstart
, car c'est le seul moment où le magasin de données pour l'opération de glisser-déposer est accessible en écriture.
Syntaxe
DataTransfer.clearData([format]);
Paramètres
Exemple
Cet exemple illustre l'utilisation des méthodes
getData()
,
setData()
et clearData()
de l'objet DataTransfer
.
HTML
<span class="tweaked" id="source" draggable="true">
Sélectionnez cet élément, glissez-le dans la zone de dépôt puis relâcher la
sélection pour déplacer l'élément.
</span>
<span class="tweaked" id="target">Zone de dépôt</span>
<div>État : <span id="status">Glisser pour démarrer</span></div>
<div>Données : <span id="data">non-initialisée</span></div>
CSS
span.tweaked {
display: inline-block;
margin: 1em 0;
padding: 1em 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
window.addEventListener("DOMContentLoaded", function () {
// On sélectionne les éléments HTML
let draggable = document.getElementById("source");
let droppable = document.getElementById("target");
let status = document.getElementById("status");
let data = document.getElementById("data");
let dropped = false;
// On enregistre les gestionnaires d'évènements
draggable.addEventListener("dragstart", dragStartHandler);
draggable.addEventListener("dragend", dragEndHandler);
droppable.addEventListener("dragover", dragOverHandler);
droppable.addEventListener("dragleave", dragLeaveHandler);
droppable.addEventListener("drop", dropHandler);
function dragStartHandler(event) {
status.textContent = "Glisser-déposer en cours";
// On change la bordure de l'élément cible pour
// indiquer que le glisser-déposer a démarré
event.currentTarget.style.border = "1px dashed blue";
// On commence par nettoyer les presse-papiers
// existants. Cela porte sur tous les types vu qu'on
// ne passe pas de type en argument.
event.dataTransfer.clearData();
// On définit le format et les données pour l'opération
// on utilise l'identifiant de la cible d'évènement comme
// donnée
event.dataTransfer.setData("text/plain", event.target.id);
data.textContent = event.dataTransfer.getData("text/plain");
}
function dragEndHandler(event) {
if (!dropped) {
status.textContent = "Glisser-déposer annulé";
}
data.textContent = event.dataTransfer.getData("text/plain") || "vide";
// On change la bordure afin d'indiquer que le glisser-
// déposer n'est plus en cours
event.currentTarget.style.border = "1px solid black";
if (dropped) {
// On retire les gestionnaires d'évènements
draggable.removeEventListener("dragstart", dragStartHandler);
draggable.removeEventListener("dragend", dragEndHandler);
droppable.removeEventListener("dragover", dragOverHandler);
droppable.removeEventListener("dragleave", dragLeaveHandler);
droppable.removeEventListener("drop", dropHandler);
}
}
function dragOverHandler(event) {
status.textContent = "Dépôt disponible";
event.preventDefault();
}
function dragLeaveHandler(event) {
status.textContent = "Glisser-déposer en cours (le dépôt était disponible)";
event.preventDefault();
}
function dropHandler(event) {
dropped = true;
status.textContent = "Dépôt effectué";
event.preventDefault();
// On récupère les données liées à l'évènement
// et qui sont au format « text »
let _data = event.dataTransfer.getData("text/plain");
let element = document.getElementById(_data);
// On ajoute l'élément source glissé à l'élément qui
// est la cible de l'évènement
event.target.appendChild(element);
// On modifie les styles CSS et le texte affiché
element.style.cssText =
"border: 1px solid black;display: block; color: red";
element.textContent = "Je suis dans la zone de dépôt !";
}
});
Résultat
Spécifications
Specification |
---|
HTML Standard # dom-datatransfer-cleardata-dev |
Compatibilité des navigateurs
BCD tables only load in the browser