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.
HTML
<div class="dropzone">
<div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="droptarget"></div>
CSS
body {
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("droptarget");
target.addEventListener("dragenter", (event) => {
if (event.target.classList.contains("dropzone")) {
event.target.classList.add("dragover");
}
});
target.addEventListener("dragleave", (event) => {
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
}
});
Result