HTMLElement: dragenter-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 dragenter-Ereignis wird ausgelöst, wenn ein gezogenes Element oder eine Textauswahl ein gültiges Ziel zum Ablegen erreicht. Das Zielelement ist die unmittelbare Benutzerauswahl (das Element, das vom Benutzer direkt als Ziel zum Ablegen angegeben wurde) oder das <body>-Element.
Dieses Ereignis kann abgebrochen werden und kann bis zum Document- und Window-Objekt weiterverbreitet werden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("dragenter", (event) => { })
ondragenter = (event) => { }
Ereignistyp
Beispiele
Drop-Zonen bei dragenter stylen
In diesem Beispiel haben wir ein ziehbares Element in einem Container. Versuchen Sie, das Element zu greifen, es über den anderen Container zu ziehen und es loszulassen.
Wir lauschen dem dragenter-Ereignis, um dem anderen Container einen lilafarbenen Hintergrund zu geben, während sich das ziehbare Element darüber befindet, um anzuzeigen, dass das Element in den Container abgelegt werden könnte.
In diesem Teilbeispiel haben wir jedoch das Ablegen nicht implementiert: für ein vollständiges Beispiel zu 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;
}
.dropzone.dragover {
background-color: purple;
}
JavaScript
const target = document.getElementById("drop-target");
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");
}
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # handler-ondragenter |
| HTML # event-dnd-dragenter |