HTMLElement : évènement dragend

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Voir la compatibilité complète
En savoir plus

L'évènement dragend de l'interface HTMLElement est déclenché lorsqu'une opération de glisser‑déposer se termine (en relâchant un bouton de la souris ou en appuyant sur la touche Échap).

Cet évènement est annulable et peut se propager jusqu'aux objets Document et Window.

Syntaxe

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

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

ondragend = (event) => { }

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

HTML

html

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

CSS

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");
});