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` (en-US) 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()` (en-US),
 `setData()` (en-US) 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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* L'API *Drag and drop* pour le glisser-déposer
* Les opérations de glisser-déposer
* Types de données pour le glisser-déposer (en-US)
* Glisser-déposer plusieurs objets
* Test `DataTransfer` — Coller ou glisser ?