HTML ondrag Attribute

Introduction

The ondrag attribute is an inline event handler that runs JavaScript when the drag event fires. That happens repeatedly on the source element while the user is dragging it—after dragstart and before dragend. It is part of the HTML Drag and Drop API. The element must have draggable="true" (for most elements) so the browser allows dragging. Use ondrag to track movement, update a ghost image, or show live feedback during a drag. The event bubbles. For production sites, prefer addEventListener("drag", …) over inline handlers. Pair drag sources with drop targets using ondragover and ondrop on the receiving element.

What You’ll Learn

Purpose of ondrag Attribute

The primary purpose of ondrag is to define what happens while a draggable element is being moved. Common uses include counting drag events, updating a status label, changing opacity of the source, or syncing a custom drag preview. It connects continuous pointer movement during a drag to JavaScript behavior without a full page reload.

Do not confuse ondrag with ondragstart or ondragend. dragstart fires once when dragging begins; drag fires many times during movement; dragend fires once when the user releases. Use ondragstart to set drag data and ondrag for live feedback during the move. Avoid alert() in handlers—update visible status text instead.

📝 Syntax

Set ondrag on a draggable element or assign element.ondrag:

<script>

  function handleDrag(event) {

    document.getElementById("status").textContent = "Dragging…";

  }

</script>



<div draggable="true" ondrag="handleDrag(event)">Drag me</div>

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

Syntax Rules

• Value is JavaScript code executed while the element is being dragged.
• The element must be draggable — set draggable="true" on most elements.
• drag fires on the source element being dragged, not on drop targets.
• Event order: dragstart once, then many drag events, then dragend once.
• JavaScript: element.ondrag = function(event) { … }.
• Modern alternative: element.addEventListener("drag", handler).
• The drag event bubbles — you can delegate on a parent container.

💎 Values

The ondrag attribute accepts a string of JavaScript code:

• ondrag="handleDrag(event)" — Call a named function with the event object.
• ondrag="this.style.opacity='0.5'" — Inline statement on the element.
• JavaScript: box.ondrag = (e) => { … } assigns the handler.

const box = document.getElementById("dragBox");

box.draggable = true;



box.addEventListener("drag", () => {

  document.getElementById("status").textContent = "Still dragging…";

});



document.getElementById("dragBox").ondrag = function (event) {

  event.target.style.opacity = "0.6";

};

Applicable Elements

ondrag vs ondragstart vs ondragend

Examples Gallery

Inline ondrag on a draggable div, dynamic element.ondrag assignment, and comparing dragstart vs drag vs dragend on the same element.

<div draggable="true" ondrag="handleDrag(event)">Drag me</div>

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



<script>

  var dragCount = 0;

  function handleDrag(event) {

    dragCount += 1;

    document.getElementById("msg").textContent =

      "drag event #" + dragCount;

  }

</script>

<script>

  document.getElementById("dynamicDragElement").ondrag = function () {

    document.getElementById("log").textContent = "Dynamic drag handler ran.";

  };



  // Or preferred form:

  document.getElementById("dynamicDragElement").addEventListener("drag", handler);

</script>

box.addEventListener("dragstart", () => {

  log("dragstart");

});



box.addEventListener("drag", () => {

  log("drag");

});



box.addEventListener("dragend", () => {

  log("dragend");

});

♿ Accessibility

• Drag is pointer-heavy — Not all users can drag with a mouse. Provide keyboard or button alternatives for the same action.
• Announce changes — Use aria-live regions when drag state changes so screen reader users get feedback.
• Avoid alert() on drag — Inline status text or visible UI updates are more accessible than modal alerts.
• Use semantic controls — For reordering lists, consider accessible patterns (move up/down buttons) alongside drag-and-drop.
• Focus visible — Do not remove focus outlines on draggable controls; keyboard users need clear focus indicators.

💡 Best Practices