HTMLElement : évènement dragover
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 dragover de l'interface HTMLElement est déclenché lorsqu'un élément ou une sélection de texte est déplacé au‑dessus d'une cible de dépôt valide (toutes les quelques centaines de millisecondes).
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("dragover", (event) => { })
ondragover = (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 minimal de glisser‑déposer
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 utilisons trois gestionnaires d'évènements ici :
- dans le gestionnaire d'évènement
dragstart, nous obtenons une référence vers l'élément déplacé par l'utilisateur·ice - dans le gestionnaire d'évènement
dragoverpour le conteneur cible, nous appelonsevent.preventDefault(), ce qui permet de recevoir les évènementsdrop. - dans le gestionnaire d'évènement
droppour la zone de dépôt, nous gérons le déplacement de l'élément déplaçable du conteneur d'origine vers la zone de dépôt.
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;
}
JavaScript
let dragged = null;
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
// stocke une référence sur l'élément déplacé
dragged = event.target;
});
const target = document.getElementById("drop-target");
target.addEventListener("dragover", (event) => {
// empêche le comportement par défaut pour autoriser le drop
event.preventDefault();
});
target.addEventListener("drop", (event) => {
// empêche l'action par défaut (ouvrir comme lien pour certains éléments)
event.preventDefault();
// déplace l'élément déplacé vers la cible de dépôt sélectionnée
if (event.target.className === "dropzone") {
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
});
Résultat
Spécifications
| Specification |
|---|
| HTML # handler-ondragover |
| HTML # event-dnd-dragover |