HTMLElement : évènement drop

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ènementdrop de l'interfaceHTMLElement est déclenché lorsqu'un élément ou une sélection de texte est déposé sur une cible de dépôt valide. Pour garantir que l'évènementdrop se déclenche toujours comme prévu, vous devez toujours inclure un appel àpreventDefault() dans la partie de votre code qui gère l'évènementdragover.

Cet évènement est annulable et peut se propager jusqu'aux objetsDocument etWindow.

Syntaxe

On utilisera le nom de l'évènement dans des méthodes telles queaddEventListener(), ou on définira une propriété gestionnaire d'évènements.

addEventListener("drop", (event) => { })ondrop = (event) => { }

Type d'évènement

Un objetDragEvent. Hérite de l'objetEvent.

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ènementdragstart, nous obtenons une référence vers l'élément déplacé par l'utilisateur·ice
dans le gestionnaire d'évènementdragover pour le conteneur cible, nous appelonsevent.preventDefault(), ce qui permet de recevoir les évènementsdrop.
dans le gestionnaire d'évènementdrop 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ènementdrag.

HTML

html

<div>  <div draggable="true">Ce div est déplaçable</div></div><div></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);  }});