HTMLElement: drop-Event

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Das drop-Event wird ausgelöst, wenn ein Element oder eine Textauswahl auf ein gültiges Ziel fallen gelassen wird. Um sicherzustellen, dass das drop-Event immer wie erwartet ausgelöst wird, sollten Sie immer einen Aufruf von preventDefault() in den Teil Ihres Codes einfügen, der das dragover-Event behandelt.

Dieses Event kann abgebrochen werden und kann bis zu den Document- und Window-Objekten hochblubbern.

Syntax

Verwenden Sie den Eventnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.

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

ondrop = (event) => { }

Im dragstart-Event-Handler erhalten wir eine Referenz auf das Element, das der Benutzer gezogen hat.
Im dragover-Event-Handler für den Zielcontainer rufen wir event.preventDefault() auf, was es ermöglicht, drop-Events zu empfangen.
Im drop-Event-Handler für die Drop-Zone behandeln wir das Verschieben des ziehbaren Elements vom ursprünglichen Container zur Drop-Zone.

Für ein vollständigeres Beispiel von Drag and Drop sehen Sie sich die Seite zum drag-Event an.

HTML

html

<div class="dropzone">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="drop-target"></div>

CSS

css

body {
  /* Prevent the user from selecting text in the example */
  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) => {
  // store a ref. on the dragged elem
  dragged = event.target;
});

const target = document.getElementById("drop-target");
target.addEventListener("dragover", (event) => {
  // prevent default to allow drop
  event.preventDefault();
});

target.addEventListener("drop", (event) => {
  // prevent default action (open as a link for some elements)
  event.preventDefault();
  // move dragged element to the selected drop target
  if (event.target.className === "dropzone") {
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
  }
});