HTMLElement: drop event
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das drop
Ereignis wird ausgelöst, wenn ein Element oder eine Textauswahl auf ein gültiges Ziel fallen gelassen wird. Um sicherzustellen, dass das drop
Ereignis immer wie erwartet ausgelöst wird, sollten Sie immer einen Aufruf von preventDefault()
im Teil Ihres Codes einfügen, der das dragover
Ereignis verarbeitet.
Dieses Ereignis kann abgebrochen werden und kann bis zu den Document
und Window
Objekten hochblasen.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("drop", (event) => {});
ondrop = (event) => {};
Ereignistyp
Ereigniseigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften von der Elternschnittstelle, Event
, verfügbar.
DragEvent.dataTransfer
Nur lesbar-
Die Daten, die während einer Drag-and-Drop-Interaktion übertragen werden.
Beispiele
Ein minimales Drag-and-Drop-Beispiel
In diesem Beispiel haben wir ein ziehbares Element innerhalb eines Containers. Versuchen Sie, das Element zu greifen, es über den anderen Container zu ziehen und es freizugeben.
Wir verwenden hier drei Ereignishandler:
- Im
dragstart
Ereignishandler erhalten wir eine Referenz zu dem Element, das der Benutzer gezogen hat. - Im
dragover
Ereignishandler für den Zielcontainer rufen wirevent.preventDefault()
auf, was es ermöglicht,drop
Ereignisse zu empfangen. - Im
drop
Ereignishandler für die Zielzone bearbeiten wir das Verschieben des ziehbaren Elements vom ursprünglichen Container zur Zielzone.
Für ein vollständigeres Beispiel für Drag and Drop siehe die Seite für das drag
Ereignis.
HTML
<div class="dropzone">
<div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="drop-target"></div>
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);
}
});
Ergebnis
Spezifikationen
Specification |
---|
HTML Standard # ix-handler-ondrop |
HTML Standard # event-dnd-drop |
Browser-Kompatibilität
BCD tables only load in the browser