HTMLElement: dragenter-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 dragenter-Ereignis wird ausgelöst, wenn ein gezogenes Element oder eine Textauswahl in ein gültiges Zielobjekt eintritt. Das Zielobjekt ist die direkte Benutzerauswahl (das vom Benutzer direkt als Zielobjekt angegebene Element) oder das <body>-Element.
Dieses Ereignis kann abgebrochen werden und kann bis zu den Objekten Document und Window nach oben blubbern.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("dragenter", (event) => { })
ondragenter = (event) => { }
Ereignistyp
Ereigniseigenschaften
Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften von der übergeordneten Schnittstelle, Event, verfügbar.
DragEvent.dataTransferSchreibgeschützt-
Die Daten, die während einer Drag-and-Drop-Interaktion übertragen werden.
Beispiele
Stilierung von Zielzonen bei dragenter
In diesem Beispiel haben wir ein ziehbares Element innerhalb eines Containers. Versuchen Sie, das Element zu greifen, es über den anderen Container zu ziehen und es freizugeben.
Wir lauschen auf das dragenter-Ereignis, um dem anderen Container einen lila Hintergrund zu geben, während das ziehbare Element über ihm ist, um zu signalisieren, dass das ziehbare Element auf den Container abgelegt werden könnte.
In diesem Teilbeispiel haben wir jedoch das Ablegen noch nicht implementiert: für ein vollständiges Drag-and-Drop-Beispiel sehen Sie 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
| Specification |
|---|
| HTML # handler-ondragenter |
| HTML # event-dnd-dragenter |
Browser-Kompatibilität
Loading…