HTML ondragover Attribute

Introduction

The ondragover attribute is an inline event handler that runs JavaScript when the dragover event fires on a drop target. That happens continuously while a dragged item’s pointer is over the target element. 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. The central rule: call event.preventDefault() in every dragover handler on the drop target—without it the browser blocks the drop. You can also set event.dataTransfer.dropEffect (copy, move, link, none) for cursor feedback. Pair ondragover with ondragenter/ondragleave for highlights and ondrop for completion. For production sites, prefer addEventListener("dragover", …) over inline handlers.

What You’ll Learn

Purpose of ondragover Attribute

The primary purpose of ondragover is to define what happens while a dragged item hovers over a drop target. Common uses include calling event.preventDefault() to allow dropping, setting event.dataTransfer.dropEffect for visual feedback, and updating a status label while the pointer moves inside the zone. It connects continuous pointer movement over a receiver to JavaScript without a full page reload.

Do not confuse ondragover with ondragstart—that fires on the source when the drag begins. dragover fires on the target repeatedly while hovering. Unlike dragenter (once on boundary entry) or dragleave (on exit), dragover is where you must call preventDefault() to enable the subsequent drop event. Avoid alert() in handlers; update visible status text instead.

📝 Syntax

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

<script>

  function handleDragOver(event) {

    event.preventDefault();

    event.dataTransfer.dropEffect = "move";

    document.getElementById("status").textContent = "dragover — drop allowed.";

  }

  function handleDrop(event) {

    event.preventDefault();

    document.getElementById("status").textContent = "drop — item released.";

  }

</script>



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

<div id="dropZone" ondragover="handleDragOver(event)" ondrop="handleDrop(event)">Drop zone</div>

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

Syntax Rules

• Value is JavaScript code executed repeatedly while the pointer is over the drop target.
• dragover fires on the drop target, not on the draggable source.
• Pair a draggable="true" source with handlers on the receiver.
• Call event.preventDefault() in every dragover handler to allow drop.
• Optional: set event.dataTransfer.dropEffect to copy, move, link, or none.
• JavaScript: element.ondragover = function(event) { … }.
• Modern alternative: element.addEventListener("dragover", handler).

💎 Values

The ondragover attribute accepts a string of JavaScript code:

• ondragover="handleDragOver(event)" — Call a named function with the event object.
• ondragover="event.preventDefault()" — Minimal inline statement to allow drop.
• JavaScript: zone.ondragover = (e) => { e.preventDefault(); … } assigns the handler.
• Set event.dataTransfer.dropEffect inside the handler for cursor feedback.

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



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

  event.preventDefault();

  event.dataTransfer.dropEffect = "move";

  document.getElementById("status").textContent =

    "dragover — preventDefault enables drop.";

});



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

  event.preventDefault();

  document.getElementById("status").textContent =

    "drop — payload accepted.";

});



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

  event.preventDefault();

  console.log("dropEffect:", event.dataTransfer.dropEffect);

};

Applicable Elements

ondragover vs ondragenter vs ondragleave vs ondrop

Examples Gallery

Inline ondragover with preventDefault and drop handler, dynamic element.ondragover assignment, and a side-by-side comparison of dragover with vs without preventDefault.

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

<div id="dropZone" ondragover="handleDragOver(event)" ondrop="handleDrop(event)">Drop zone</div>

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



<script>

  function handleDragOver(event) {

    event.preventDefault();

    document.getElementById("msg").textContent = "dragover — drop allowed.";

  }

  function handleDrop(event) {

    event.preventDefault();

    document.getElementById("msg").textContent = "drop — item released.";

  }

</script>

<script>

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

    event.preventDefault();

    event.dataTransfer.dropEffect = "move";

    document.getElementById("log").textContent =

      "Dynamic dragover — preventDefault enables drop.";

  };



  // Or preferred form:

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

</script>

blockedZone.addEventListener("dragover", function () {

  // No preventDefault — browser blocks drop

});



allowedZone.addEventListener("dragover", function (event) {

  event.preventDefault();

  event.dataTransfer.dropEffect = "move";

});



allowedZone.addEventListener("drop", function (event) {

  event.preventDefault();

  status.textContent = "Drop succeeded.";

});

♿ 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 dragover updates status text so screen reader users know the zone accepts drops.
• Avoid alert() on dragover — Inline status text or visible UI updates are more accessible than modal alerts fired on every dragover tick.
• Do not rely on dragover 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