HTMLElement : évènement dragend

Syntaxe

On utilisera le nom de l'évènement dans des méthodes telles que addEventListener(), ou on définira une propriété gestionnaire d'évènements.

addEventListener("dragend", (event) => { })

ondragend = (event) => { }

Type d'évènement

Un objet DragEvent. Hérite de l'objet Event.

Propriétés d'évènement

En plus des propriétés listées ci‑dessous, les propriétés de l'interface parente, Event, sont disponibles.

DragEvent.dataTransfer Lecture seule

Les données transférées lors d'une interaction de glisser‑déposer.

Exemples

Réinitialisation de l'opacité à la fin du déplacement

Dans cet exemple, nous avons un élément déplaçable à l'intérieur d'un conteneur. Essayez de saisir l'élément, de le déplacer, puis de le relâcher.

Nous rendons l'élément semi‑transparent pendant le déplacement, et nous écoutons l'évènement dragend pour réinitialiser l'opacité de l'élément lorsqu'il est relâché.

Pour un exemple complet de glisser‑déposer, consultez la page de l'évènement drag.

HTML

<div id="container">
  <div id="draggable" draggable="true">Ce div est déplaçable</div>
</div>
<div class="dropzone"></div>

CSS

body {
  /* Empêche l'utilisateur·ice de sélectionner du texte dans l'exemple */
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}

.dragging {
  opacity: 0.5;
}

JavaScript

const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // rend l'élément semi‑transparent
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // réinitialise la transparence
  event.target.classList.remove("dragging");
});

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Autres évènements de glisser-deposer :
  • drag
  • dragstart
  • dragover
  • dragenter
  • dragleave
  • drop