HTMLElement : évènement drag
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 drag de l'interface HTMLElement est déclenché toutes les quelques centaines de millisecondes lorsqu'un élément ou une sélection de texte est déplacé par l'utilisateur·ice.
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("drag", (event) => { })
ondrag = (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
Exemple de glisser‑déposer
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;
}
.dragging {
opacity: 0.5;
}
JavaScript
let dragged;
/* les événements déclenchés sur la cible déplaçable */
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
console.log("déplacement");
});
source.addEventListener("dragstart", (event) => {
// stocker une référence sur l'élément déplacé
dragged = event.target;
// rendre l'élément semi-transparent
event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
// réinitialiser la transparence
event.target.classList.remove("dragging");
});
/* les événements déclenchés sur les cibles de dépôt */
const target = document.getElementById("drop-target");
target.addEventListener("dragover", (event) => {
// empêcher le comportement par défaut pour autoriser le dépôt
event.preventDefault();
});
target.addEventListener("dragenter", (event) => {
// mettre 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éinitialiser 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");
}
});
target.addEventListener("drop", (event) => {
// empêcher le comportement par défaut (ouvrir comme un lien pour certains éléments)
event.preventDefault();
// déplacer l'élément déplacé vers la cible de dépôt sélectionnée
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
event.target.appendChild(dragged);
}
});
Résultat
Spécifications
| Specification |
|---|
| HTML # handler-ondrag |
| HTML # event-dnd-drag |