HTML ondrop Attribute

Introduction

The ondrop attribute is an inline event handler that runs JavaScript when the drop event fires on a drop target — the element receiving the dragged item. It fires once when the user releases the pointer over a valid drop zone. It is part of the HTML Drag and Drop API: pair ondrop with ondragover calling event.preventDefault() so the browser allows the drop, then read the payload with event.dataTransfer.getData() (set in dragstart on the source). Call event.preventDefault() in the drop handler too. Drop targets also receive dragenter, dragover, and dragleave while hovering; the source receives dragend when the drag finishes. For production sites, prefer addEventListener("drop", …) over inline handlers.

What You’ll Learn

Purpose of ondrop Attribute

The primary purpose of ondrop is to define what happens when a user releases a dragged item onto a drop target. Common uses include reading event.dataTransfer.getData() to accept a payload, moving or copying DOM nodes, updating a status label, and handling files dropped from the OS via event.dataTransfer.files. It connects the final moment of a successful drag gesture to JavaScript without a full page reload.

Do not confuse ondrop with ondragstart—that fires on the source when dragging begins. drop fires on the target exactly once when released. Unlike ondragover (repeated while hovering) or ondragend (once on the source when the drag ends), drop is where you read getData and update the receiver. Avoid alert() in handlers; update visible status text instead.

📝 Syntax

Set ondrop on a drop target (with ondragover) or assign element.ondrop:

<script>

  function allowDrop(event) {

    event.preventDefault();

  }



  function handleDrop(event) {

    event.preventDefault();

    var payload = event.dataTransfer.getData("text/plain");

    document.getElementById("status").textContent = "drop — getData: " + payload;

  }

</script>



<div ondragover="allowDrop(event)" ondrop="handleDrop(event)">Drop zone</div>

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

Syntax Rules

• Value is JavaScript code executed once when the user releases a dragged item on the element.
• drop fires on the drop target, not on the draggable source.
• Call event.preventDefault() in dragover on the same target so drop is allowed.
• Call event.preventDefault() in the drop handler to prevent the browser default action.
• Read payload with event.dataTransfer.getData(type) (set in dragstart on the source).
• For OS file drops, read event.dataTransfer.files instead of getData.
• JavaScript: element.ondrop = function(event) { … }.
• Modern alternative: element.addEventListener("drop", handler).

💎 Values

The ondrop attribute accepts a string of JavaScript code:

• ondrop="handleDrop(event)" — Call a named function with the event object.
• ondrop="event.preventDefault(); var d = event.dataTransfer.getData('text/plain')" — Minimal inline getData.
• JavaScript: zone.ondrop = (e) => { e.preventDefault(); … } assigns the handler.
• Pair with ondragover="event.preventDefault()" or an equivalent dragover handler.

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



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

  event.preventDefault();

});



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

  event.preventDefault();

  const payload = event.dataTransfer.getData("text/plain");

  document.getElementById("status").textContent =

    "drop — getData returned: " + payload;

});



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

  event.preventDefault();

  console.log("getData:", event.dataTransfer.getData("text/plain"));

};

Applicable Elements

ondrop vs ondragend vs ondragenter / ondragover / ondragleave

Examples Gallery

Inline ondrop with dragover preventDefault and getData, dynamic element.ondrop assignment, and a full mini workflow comparing ondrop on the target with dragend on the source.

<div draggable="true" ondragstart="handleDragStart(event)">Drag me</div>

<div ondragover="allowDrop(event)" ondrop="handleDrop(event)">Drop zone</div>

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



<script>

  function handleDragStart(event) {

    event.dataTransfer.setData("text/plain", "Hello from dragstart");

  }

  function allowDrop(event) { event.preventDefault(); }

  function handleDrop(event) {

    event.preventDefault();

    document.getElementById("msg").textContent =

      "drop — getData: " + event.dataTransfer.getData("text/plain");

  }

</script>

<script>

  document.getElementById("dynamicDropZone").ondrop = function (event) {

    event.preventDefault();

    var payload = event.dataTransfer.getData("text/plain");

    document.getElementById("log").textContent =

      "Dynamic drop — getData: " + payload;

  };



  // Or preferred form:

  document.getElementById("dynamicDropZone").addEventListener("drop", handler);

</script>

source.addEventListener("dragstart", function (event) {

  event.dataTransfer.setData("text/plain", "Item from dragstart");

});



source.addEventListener("dragend", function (event) {

  status.textContent = "dragend on SOURCE — dropEffect: " + event.dataTransfer.dropEffect;

});



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

  event.preventDefault();

});



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

  event.preventDefault();

  var payload = event.dataTransfer.getData("text/plain");

  status.textContent = "drop on TARGET — getData: " + payload;

});

♿ Accessibility

• Drag is pointer-heavy — Not all users can drag with a mouse. Provide keyboard or button alternatives for the same action.
• Announce drop results — Use aria-live regions when drop updates status text so screen reader users know the transfer succeeded.
• Avoid alert() on drop — Inline status text or visible UI updates are more accessible than modal alerts after a drop.
• Do not rely on drag alone — Finalize important actions in accessible controls, not only after a drag gesture.
• Visible focus — Ensure drop zones have sufficient color contrast and clear hover/active states.

💡 Best Practices