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 Juli 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 preventDefault() Aufruf in dem Teil Ihres Codes einfügen, der das dragover Ereignis behandelt.
Dieses Ereignis ist abfangbar und kann bis zu den Objekten Document und Window hochblubbern.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignisbehandlereigenschaft.
addEventListener("drop", (event) => { })
ondrop = (event) => { }
Ereignistyp
Ereigniseigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften sind die Eigenschaften der Elternschnittstelle, Event, verfügbar.
DragEvent.dataTransferSchreibgeschützt-
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 dort loszulassen.
Wir verwenden hier drei Ereignisbehandler:
- Im
dragstartEreignisbehandler erhalten wir eine Referenz auf das vom Benutzer gezogene Element. - Im
dragoverEreignisbehandler für den Zielcontainer rufen wirevent.preventDefault()auf, was es ermöglicht,dropEreignisse zu empfangen. - Im
dropEreignisbehandler für die Abwurfzone handhaben wir das Verschieben des ziehbaren Elements vom ursprünglichen Container zur Abwurfzone.
Für ein vollständigeres Beispiel zu 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 # handler-ondrop |
| HTML # event-dnd-drop |
Browser-Kompatibilität
Loading…