HTML ondragleave Attribute

Introduction

The ondragleave attribute is an inline event handler that runs JavaScript when the dragleave event fires on a drop target. That happens when a dragged item’s pointer crosses out of the target element’s boundary. 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 ondragleave mainly to remove visual feedback (unhighlight the zone) that ondragenter added. To allow a drop, call event.preventDefault() in dragover—not in dragleave. Watch for nested children: moving into a child fires dragleave on the parent—use an enter/leave counter or event.relatedTarget. For production sites, prefer addEventListener("dragleave", …) over inline handlers.

What You’ll Learn

Purpose of ondragleave Attribute

The primary purpose of ondragleave is to define what happens when a dragged item leaves a drop target. Common uses include removing a highlight class, resetting a status label (“Drop here” → idle), or stopping a subtle animation so users know the zone is no longer active. It connects pointer movement out of a receiver to JavaScript cleanup without a full page reload.

Do not confuse ondragleave with ondragend—that fires on the source when the drag gesture ends. dragleave fires on the target when the pointer exits its boundary. Pair it with ondragenter to add and remove highlights symmetrically. dragover fires repeatedly while hovering and is where preventDefault() enables dropping. When nested children exist, a naive dragleave handler may unhighlight too early—use a counter or check event.relatedTarget. Avoid alert() in handlers; update visible status text instead.

📝 Syntax

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

<script>

  function handleDragLeave(event) {

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

    if (!zone.contains(event.relatedTarget)) {

      zone.classList.remove("over");

      document.getElementById("status").textContent = "dragleave — pointer left zone.";

    }

  }

</script>



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

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

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

Syntax Rules

• Value is JavaScript code executed when the pointer leaves the drop target boundary.
• dragleave 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.
• dragleave can fire when entering nested children—use a counter or relatedTarget checks.
• JavaScript: element.ondragleave = function(event) { … }.
• Modern alternative: element.addEventListener("dragleave", handler).

💎 Values

The ondragleave attribute accepts a string of JavaScript code:

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

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");

    document.getElementById("status").textContent =

      "dragleave — left drop zone.";

  }

});



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

  event.preventDefault();

});



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

  console.log("Pointer left target.", event.relatedTarget);

};

Applicable Elements

ondragleave vs ondragenter vs ondragover vs ondrop

Examples Gallery

Inline ondragleave removing highlight paired with dragenter, dynamic element.ondragleave assignment, and the enter/leave counter pattern for nested drop zones.

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

<div id="dropZone" ondragenter="handleDragEnter(event)" ondragleave="handleDragLeave(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.";

  }

  function handleDragLeave(event) {

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

    if (!zone.contains(event.relatedTarget)) {

      zone.classList.remove("over");

      document.getElementById("msg").textContent = "dragleave — left drop zone.";

    }

  }

</script>

<script>

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

    if (!event.currentTarget.contains(event.relatedTarget)) {

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

      document.getElementById("log").textContent =

        "Dynamic dragleave — pointer left target.";

    }

  };



  // Or preferred form:

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

</script>

let enterCount = 0;



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

  enterCount += 1;

  zone.classList.add("over");

});



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

  enterCount -= 1;

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

});



zone.addEventListener("dragover", (e) => { e.preventDefault(); });

♿ 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 dragleave clears a highlight so screen reader users know the zone is inactive.
• Avoid alert() on dragleave — Inline status text or visible UI updates are more accessible than modal alerts.
• Do not rely on dragleave 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