DataTransfer.clearData()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

js
DataTransfer.clearData([format]);

Paramètres

format Facultatif

Une chaîne de caractères DOMString qui indique le type de données à retirer. Si ce paramètre est une chaîne vide ou qu'il n'est pas fourni, les données pour l'ensemble des types seront retirées.

Exemple

Cet exemple illustre l'utilisation des méthodes getData(), setData() et clearData() de l'objet DataTransfer.

HTML

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

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

js
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

Voir aussi