HTMLElement: drop-Ereignis
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.
Das drop-Ereignis wird ausgelöst, wenn ein Element oder eine Textauswahl auf einem gültigen Ablageziel abgelegt wird. Damit das drop-Ereignis zuverlässig ausgelöst wird, sollten Sie im Code, der das dragover-Ereignis verarbeitet, immer preventDefault() aufrufen.
Dieses Ereignis kann abgebrochen werden und zu den Objekten Document und Window aufsteigen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("drop", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
ondrop = (event) => { }
Ereignistyp
Beispiele
Ein einfaches Drag-and-Drop-Beispiel
In diesem Beispiel befindet sich ein ziehbares Element in einem Container. Versuchen Sie, das Element zu greifen, es über den anderen Container zu ziehen und dort loszulassen.
Hier verwenden wir drei Event-Handler:
- Im
dragstart-Event-Handler erhalten wir eine Referenz auf das Element, das der Benutzer gezogen hat. - Im
dragover-Event-Handler des Zielcontainers rufen wirevent.preventDefault()auf. Dadurch kann der Containerdrop-Ereignisse empfangen. - Im
drop-Event-Handler der Ablagezone verschieben wir das ziehbare Element vom ursprünglichen Container in die Ablagezone.
Ein ausführlicheres Drag-and-Drop-Beispiel finden Sie auf der Seite zum 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
| Spezifikation |
|---|
| HTML # handler-ondrop |
| HTML # event-dnd-drop |