HTML ondragenter Attribute

Introduction

The ondragenter attribute is an inline event handler that runs JavaScript when the dragenter event fires on a drop target. That happens when a dragged item’s pointer crosses into the target element’s boundary—including when moving over nested descendants. It is part of the HTML Drag and Drop API: pair a draggable="true" source with a receiver that listens for dragenter, dragover, dragleave, and drop. Use ondragenter mainly for visual feedback (highlighting the zone). To allow a drop, call event.preventDefault() in dragover—not because dragenter always requires it. For production sites, prefer addEventListener("dragenter", …) over inline handlers.

What You’ll Learn

Purpose of ondragenter Attribute

The primary purpose of ondragenter is to define what happens when a dragged item enters a drop target. Common uses include adding a highlight class, updating a status label (“Release to drop”), or playing a subtle animation so users know the zone is active. It connects pointer movement over a receiver to JavaScript feedback without a full page reload.

Do not confuse ondragenter with ondragstart or ondragend—those fire on the source being dragged. dragenter fires on the target when the pointer crosses its boundary. dragover fires repeatedly while hovering and is where preventDefault() enables dropping. dragleave fires when leaving the boundary; pair it with dragenter to remove highlights. Avoid alert() in handlers; update visible status text instead.

📝 Syntax

Set ondragenter on a drop target or assign element.ondragenter:

<script>

  function handleDragEnter(event) {

    document.getElementById("dropZone").classList.add("over");

    document.getElementById("status").textContent = "dragenter — pointer entered zone.";

  }

</script>



<div draggable="true">Drag me</div>

<div id="dropZone" ondragenter="handleDragEnter(event)">Drop zone</div>

<p id="status"></p>

Syntax Rules

• Value is JavaScript code executed when the pointer enters the drop target boundary.
• dragenter fires on the drop target, not on the draggable source.
• Pair a draggable="true" source with handlers on the receiver.
• Call event.preventDefault() in dragover on the target to allow drop.
• dragenter can fire multiple times when moving over nested children—use a counter or relatedTarget checks.
• JavaScript: element.ondragenter = function(event) { … }.
• Modern alternative: element.addEventListener("dragenter", handler).

💎 Values

The ondragenter attribute accepts a string of JavaScript code:

• ondragenter="handleDragEnter(event)" — Call a named function with the event object.
• ondragenter="this.classList.add('over')" — Inline statement to highlight the target.
• JavaScript: zone.ondragenter = (e) => { … } assigns the handler.
• Pair with ondragleave or a counter to remove highlight when the pointer exits.

const zone = document.getElementById("dropZone");

let enterCount = 0;



zone.addEventListener("dragenter", (event) => {

  enterCount += 1;

  zone.classList.add("over");

  document.getElementById("status").textContent =

    "dragenter — entered drop zone.";

});



zone.addEventListener("dragleave", (event) => {

  enterCount -= 1;

  if (enterCount === 0) zone.classList.remove("over");

});



zone.addEventListener("dragover", (event) => {

  event.preventDefault();

});



document.getElementById("dropZone").ondragenter = function (event) {

  console.log("Pointer entered target.");

};

Applicable Elements

ondragenter vs ondragover vs ondragleave vs ondrop

Examples Gallery

Inline ondragenter highlighting a drop zone, dynamic element.ondragenter assignment, and comparing dragenter vs dragover vs dragleave on a target.

<div draggable="true">Drag me</div>

<div id="dropZone" ondragenter="handleDragEnter(event)">Drop zone</div>

<p id="msg"></p>



<script>

  function handleDragEnter(event) {

    document.getElementById("dropZone").classList.add("over");

    document.getElementById("msg").textContent = "dragenter — entered drop zone.";

  }

</script>

<script>

  document.getElementById("dynamicDropTarget").ondragenter = function (event) {

    document.getElementById("log").textContent =

      "Dynamic dragenter — pointer entered target.";

    event.currentTarget.classList.add("over");

  };



  // Or preferred form:

  document.getElementById("dynamicDropTarget").addEventListener("dragenter", handler);

</script>

target.addEventListener("dragenter", () => { log("dragenter (boundary entered)"); });

target.addEventListener("dragover", (e) => {

  e.preventDefault();

  log("dragover (while hovering)");

});

target.addEventListener("dragleave", () => { log("dragleave (boundary left)"); });

target.addEventListener("drop", () => { log("drop (released on target)"); });

♿ Accessibility

• Drag is pointer-heavy — Not all users can drag with a mouse. Provide keyboard or button alternatives for the same action.
• Announce zone state — Use aria-live regions when dragenter highlights a zone so screen reader users get feedback.
• Avoid alert() on dragenter — Inline status text or visible UI updates are more accessible than modal alerts.
• Do not rely on dragenter alone — Finalize important actions in accessible controls, not only after a drag gesture.
• Visible focus — Ensure highlighted drop zones have sufficient color contrast and do not hide focus outlines on interactive elements.

💡 Best Practices