HTMLElement: dragend-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 dragend-Ereignis wird ausgelöst, wenn ein Ziehvorgang endet (durch Loslassen einer Maustaste oder Drücken der Escape-Taste).
Dieses Ereignis kann abgebrochen werden und zu den Objekten Document und Window aufsteigen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("dragend", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft des Interfaces zuweisen:
ondragend = (event) => { }
Ereignistyp
Beispiele
Deckkraft nach dragend zurücksetzen
In diesem Beispiel befindet sich ein ziehbares Element innerhalb eines Containers. Versuchen Sie, das Element zu greifen, es zu ziehen und dann loszulassen.
Während das Element gezogen wird, machen wir es halbtransparent. Wir lauschen auf das dragend-Ereignis, um die Deckkraft des Elements zurückzusetzen, sobald es losgelassen wird.
Ein vollständiges Drag-and-Drop-Beispiel finden Sie auf der Seite zum drag-Ereignis.
HTML
<div id="container">
<div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone"></div>
CSS
body {
/* Prevent the user from selecting text in the example */
user-select: none;
}
#draggable {
text-align: center;
background: white;
}
#container {
width: 200px;
height: 20px;
background: blueviolet;
padding: 10px;
}
.dragging {
opacity: 0.5;
}
JavaScript
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
// make it half transparent
event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
// reset the transparency
event.target.classList.remove("dragging");
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # handler-ondragend |
| HTML # event-dnd-dragend |