HTMLElement : évènement dragenter
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 dragenter de l'interface HTMLElement est déclenché lorsqu'un élément déplacé ou une sélection de texte entre dans une cible de dépôt valide. L'objet cible est la sélection immédiate de l'utilisateur·ice (l'élément directement indiqué comme cible de dépôt), ou l'élément <body>.
Cet évènement est 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("dragenter", (event) => { })
ondragenter = (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
Mise en forme des zones de dépôt sur dragenter
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 écoutons l'évènement dragenter pour donner à l'autre conteneur un arrière‑plan violet pendant que l'élément déplaçable le survole, afin d'indiquer que l'élément peut y être déposé.
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-ondragenter |
| HTML # event-dnd-dragenter |