HTMLElement: dragover 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 dragover-Ereignis wird ausgelöst, wenn ein Element oder eine Textauswahl über ein gültiges Ziel geschoben wird (alle paar Hundert Millisekunden).

Dieses Ereignis ist abbrechbar und kann bis zu den Objekten Document und Window nach oben weitergegeben werden.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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

ondragover = (event) => { }

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

Für ein vollständiges Beispiel für Drag-and-Drop, sehen Sie sich die Seite für das drag-Ereignis 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 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);
  }
});