HTMLElement: drag-Ereignis
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 drag-Ereignis wird alle paar hundert Millisekunden ausgelöst, wenn ein Element oder eine Textauswahl vom Benutzer gezogen wird.
Dieses Ereignis kann abgebrochen werden und kann bis zu den Objekten Document und Window hochblubbern.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-Eigenschaft.
js
addEventListener("drag", (event) => { })
ondrag = (event) => { }
Ereignistyp
Ereigniseigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften der übergeordneten Schnittstelle, Event, verfügbar.
DragEvent.dataTransferSchreibgeschützt-
Die Daten, die während einer Drag-and-Drop-Interaktion übertragen werden.
Beispiele
Beispiel für Drag and Drop
HTML
html
<div class="dropzone">
<div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="drop-target"></div>
CSS
css
body {
/* Prevent the user 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;
}
.dropzone.dragover {
background-color: purple;
}
.dragging {
opacity: 0.5;
}
JavaScript
js
let dragged;
/* events fired on the draggable target */
const source = document.getElementById("draggable");
source.addEventListener("drag", (event) => {
console.log("dragging");
});
source.addEventListener("dragstart", (event) => {
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
// reset the transparency
event.target.classList.remove("dragging");
});
/* events fired on the drop targets */
const target = document.getElementById("drop-target");
target.addEventListener(
"dragover",
(event) => {
// prevent default to allow drop
event.preventDefault();
},
false,
);
target.addEventListener("dragenter", (event) => {
// highlight potential drop target when the draggable element enters it
if (event.target.classList.contains("dropzone")) {
event.target.classList.add("dragover");
}
});
target.addEventListener("dragleave", (event) => {
// reset background of potential drop target when the draggable element leaves it
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
}
});
target.addEventListener("drop", (event) => {
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged element to the selected drop target
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
event.target.appendChild(dragged);
}
});
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # handler-ondrag |
| HTML # event-dnd-drag |
Browser-Kompatibilität
Loading…