Baseline Widely available
The dragenter event is fired when a dragged element or text selection enters a valid drop target. The target object is the immediate user selection (the element directly indicated by the user as the drop target), or the <body> element.
This event is cancelable and may bubble up to the Document and Window objects.
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("dragenter", (event) => { })
ondragenter = (event) => { }
In addition to the properties listed below, properties from the parent interface, Event, are available.
DragEvent.dataTransfer Read only
The data that is transferred during a drag-and-drop interaction.
In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and releasing it.
We listen for the dragenter event to give the other container a purple background while the draggable element is over it to signal that the draggable element could be dropped onto the container.
However, in this partial example, we haven't implemented dropping: for a complete example of drag and drop, see the page for the drag event.
<div class="dropzone">
<div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="drop-target"></div>
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;
}
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");
}
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4