DataTransfer.clearData()

La méthode DataTransfer.clearData() retire l'opération de 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.

Si cette méthode est appelée sans argument, ou que le format donné est une  chaîne de caractères  vide, les données de tous les formats seront retirées.

Syntaxe

void dataTransfer.clearData([format]);

Paramètres

formatFacultatif

Une chaîne de caractères représentant le format de donnée à retirer.

Valeur de retour

Void.

Exemple

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

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 () {
  // 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()
  }
})

Spécifications

Compatibilité

À voir également

Drag and Drop