HTMLElement: dragstart-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 dragstart-Ereignis wird ausgelöst, wenn ein Benutzer beginnt, ein Element oder eine Textauswahl zu ziehen.
Dieses Ereignis kann abgebrochen werden und bis zu den Objekten Document und Window aufsteigen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("dragstart", (event) => { })
Alternativ können Sie die Event-Handler-Eigenschaft der Schnittstelle zuweisen:
ondragstart = (event) => { }
Ereignistyp
Beispiele
Deckkraft beim Beginn des Ziehens festlegen
In diesem Beispiel befindet sich ein ziehbares Element innerhalb eines Containers. Versuchen Sie, das Element anzufassen, zu ziehen und anschließend loszulassen.
Wir überwachen das dragstart-Ereignis, um das Element während des Ziehens halbtransparent darzustellen.
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-ondragstart |
| HTML # event-dnd-dragstart |