HTMLElement: dragover-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 dragover-Ereignis wird ausgelöst, wenn ein Element oder eine Textauswahl über ein gültiges Ziel gezogen wird (alle paar hundert Millisekunden).
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.
addEventListener("dragover", (event) => { })
ondragover = (event) => { }
Ereignistyp
Ereigniseigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften sind die Eigenschaften der übergeordneten Schnittstelle, 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, über den anderen Container zu ziehen und loszulassen.
Wir verwenden hier drei Ereignis-Handler:
- Im
dragstart-Ereignis-Handler erhalten wir eine Referenz auf das Element, das der Benutzer gezogen hat. - Im
dragover-Ereignis-Handler für den Zielcontainer rufen wirevent.preventDefault()auf, wodurch esdrop-Ereignisse empfangen kann. - Im
drop-Ereignis-Handler für die Ablagezone behandeln wir das Verschieben des ziehbaren Elements vom ursprünglichen Container in die Ablagezone.
Für ein vollständiges Beispiel für 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 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-ondragover |
| HTML # event-dnd-dragover |
Browser-Kompatibilität
Loading…