path: root/files/fr/web/api/datatransfer/cleardata/index.html

---
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>

<p class="note">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>

<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 line-numbers  language-html">&lt;span class="tweaked" id="source" draggable="true"&gt;
  Sélectionnez cet élément, glissez-le et déposez-le dans la Zone de Dépose pour le déplacer.
&lt;/span&gt;
&lt;span class="tweaked" id="target"&gt;Zone de Dépose&lt;/span&gt;
&lt;div&gt;Status: &lt;span id="status"&gt;Glissez pour démarrer&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;Data is: &lt;span id="data"&gt;non initialisé&lt;/span&gt;&lt;/div&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css line-numbers  language-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>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Support basique</td>
   <td>4</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>10</td>
   <td>12</td>
   <td>3.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support basique</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatIE("10")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="À_voir_également">À voir également</h2>

<p>{{page("/fr/docs/Web/API/DataTransfer", "See also")}}</p>