HTMLElement : évènement dragleave
Baseline
Widely available
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.
L'évènement dragleave de l'interface HTMLElement est déclenché lorsqu'un élément déplacé ou une sélection de texte quitte une cible de dépôt valide.
Cet évènement n'est pas annulable et peut se propager jusqu'aux objets Document et Window.
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("dragleave", (event) => { })
ondragleave = (event) => { }
Type d'évènement
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.dataTransferLecture seule-
Les données transférées lors d'une interaction de glisser‑déposer.
Exemples
Réinitialisation du style des zones de dépôt sur dragleave
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 au‑dessus de l'autre conteneur, puis de le relâcher.
Nous donnons à l'autre conteneur un arrière‑plan violet pendant que l'élément déplaçable le survole, afin d'indiquer qu'il peut y être déposé. Nous écoutons l'évènement dragleave pour réinitialiser l'arrière‑plan du conteneur lorsque l'élément déplaçable quitte le conteneur.
Cependant, dans cet exemple partiel, la fonctionnalité de dépôt n'est pas implémentée : pour un exemple complet de glisser‑déposer, consultez la page de l'évènement drag.
HTML
<div class="dropzone">
<div id="draggable" draggable="true">Ce div est déplaçable</div>
</div>
<div class="dropzone" id="drop-target"></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;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin: 10px;
padding: 10px;
}
.dropzone.dragover {
background-color: purple;
}
JavaScript
const target = document.getElementById("drop-target");
target.addEventListener("dragenter", (event) => {
// met en surbrillance la cible de dépôt potentielle lorsque l'élément déplaçable y entre
if (event.target.classList.contains("dropzone")) {
event.target.classList.add("dragover");
}
});
target.addEventListener("dragleave", (event) => {
// réinitialise l'arrière‑plan de la cible de dépôt potentielle lorsque l'élément déplaçable la quitte
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
}
});
Résultat
Spécifications
| Specification |
|---|
| HTML # handler-ondragleave |
| HTML # event-dnd-dragleave |