HTML ondragend Attribute

Introduction

The ondragend attribute is an inline event handler that runs JavaScript when the dragend event fires. That happens once on the source element when the user releases the mouse button and the drag operation ends—after dragstart and any drag events. It fires whether the drop succeeded or was cancelled. It is part of the HTML Drag and Drop API. The element must have draggable="true" (for most elements). Use ondragend to reset styles, read event.dataTransfer.dropEffect (none, copy, move, link), or finalize state. Do not confuse it with ondrop, which fires on the target. For production sites, prefer addEventListener("dragend", …) over inline handlers.

What You’ll Learn

Purpose of ondragend Attribute

The primary purpose of ondragend is to define what happens when a drag operation finishes on the source element. Common uses include resetting opacity or CSS classes applied during the drag, reading event.dataTransfer.dropEffect to know if the drop succeeded, clearing temporary state, or updating a status label. It connects the end of pointer movement to JavaScript cleanup without a full page reload.

Do not confuse ondragend with ondrag or ondrop. dragstart fires once when dragging begins; drag fires many times during movement; dragend fires once when the user releases on the source. drop fires on the drop target only when released over a valid receiver. dragend always runs—even if no drop occurred. Avoid alert() in handlers; update visible status text instead.

📝 Syntax

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

<script>

  function handleDragEnd(event) {

    var effect = event.dataTransfer.dropEffect;

    document.getElementById("status").textContent =

      "Drag ended — dropEffect: " + effect;

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

  }

</script>



<div draggable="true" ondragend="handleDragEnd(event)">Drag me</div>

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

Syntax Rules

• Value is JavaScript code executed once when the drag ends on the source element.
• The element must be draggable — set draggable="true" on most elements.
• dragend fires on the source being dragged, not on drop targets.
• Event order: dragstart once, then many drag events, then dragend once on the source.
• dragend fires whether the drop succeeded or was cancelled.
• JavaScript: element.ondragend = function(event) { … }.
• Modern alternative: element.addEventListener("dragend", handler).

💎 Values

The ondragend attribute accepts a string of JavaScript code:

• ondragend="handleDragEnd(event)" — Call a named function with the event object.
• ondragend="this.style.opacity='1'" — Inline statement to reset styles on release.
• JavaScript: box.ondragend = (e) => { … } assigns the handler.
• Read event.dataTransfer.dropEffect — none, copy, move, or link.

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

box.draggable = true;



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

  const effect = event.dataTransfer.dropEffect;

  document.getElementById("status").textContent =

    "Drag ended — dropEffect: " + effect;

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

});



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

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

};

Applicable Elements

ondragend vs ondrag vs ondrop

Examples Gallery

Inline ondragend showing dropEffect, dynamic element.ondragend assignment, and comparing dragend vs drop with the full dragstart → drag → dragend sequence.

<div draggable="true" ondragend="handleDragEnd(event)">Drag me</div>

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



<script>

  function handleDragEnd(event) {

    document.getElementById("msg").textContent =

      "dragend — dropEffect: " + event.dataTransfer.dropEffect;

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

  }

</script>

<script>

  document.getElementById("dynamicDragElement").ondragend = function (event) {

    document.getElementById("log").textContent =

      "Dynamic dragend — dropEffect: " + event.dataTransfer.dropEffect;

  };



  // Or preferred form:

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

</script>

box.addEventListener("dragstart", () => { log("dragstart"); });

box.addEventListener("drag", () => { log("drag"); });

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

  log("dragend — dropEffect: " + e.dataTransfer.dropEffect);

});

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

♿ Accessibility

• Drag is pointer-heavy — Not all users can drag with a mouse. Provide keyboard or button alternatives for the same action.
• Announce drag end — Use aria-live regions when dragend resets state so screen reader users get feedback.
• Avoid alert() on dragend — Inline status text or visible UI updates are more accessible than modal alerts.
• Do not rely on dragend alone — Finalize important actions in accessible controls, not only after a drag gesture.
• Focus visible — Restore focus and visible outlines after dragend cleanup on interactive elements.

💡 Best Practices