HTMLElement : évènement drag

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 drag 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é par l'utilisateur·ice. 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.

La fréquence de déclenchement dépend du navigateur, du système d'exploitation et du mouvement du pointeur. L'évènement drag peut continuer à se déclencher lorsque le pointeur est immobile, et peut se déclencher plus fréquemment lorsqu'il est en mouvement. Ne vous fiez pas à un intervalle fixe et ne vous attendez pas à un évènement pour chaque mouvement du pointeur. 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 déplacement 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 utilisera 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("drag", (event) => { })

ondrag = (event) => { }

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

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