HTMLElement : évènement dragover

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 dragover de l'interface HTMLElement est déclenché de manière répétée lorsqu'un élément ou une sélection de texte est en train d'être déplacé au‑dessus d'une cible de dépôt potentielle.

La fréquence de déclenchement dépend du navigateur, du système d'exploitation et du mouvement du pointeur ; ne vous fiez pas à un intervalle fixe. L'évènement dragover peut continuer à se déclencher lorsque le pointeur est immobile, et peut se déclencher plus fréquemment lorsqu'il est en mouvement. La spécification HTML ^(angl.) utilise une fréquence de déclenchement d'environ 350ms (±200ms). En pratique, les navigateurs utilisent des mises à jour de glisser-déposer natives et des minuteries spécifiques à la plateforme pour dispatcher ces évènements, donc cet intervalle ne décrit pas tout le comportement des navigateurs.

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("dragover", (event) => { })

ondragover = (event) => { }

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 dragover pour le conteneur cible, nous appelons event.preventDefault(), ce qui permet de recevoir les évènements drop.
dans le gestionnaire d'évènement drop pour 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

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

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