HTML ondragstart Attribute

Introduction

The ondragstart attribute is an inline event handler that runs JavaScript when the dragstart event fires on the draggable source — the element being dragged. It fires once when the user begins dragging. It is part of the HTML Drag and Drop API: set draggable="true" on the source, then use ondragstart to call event.dataTransfer.setData(type, value) so drop targets can read the payload with getData. You can also set event.dataTransfer.effectAllowed and setDragImage for a custom drag ghost. The drag sequence on the source is dragstart → drag (many times) → dragend; drop targets receive dragenter, dragover, and drop. For production sites, prefer addEventListener("dragstart", …) over inline handlers.

What You’ll Learn

Purpose of ondragstart Attribute

The primary purpose of ondragstart is to define what happens when a user begins dragging an element. Common uses include calling event.dataTransfer.setData() to attach a payload, setting event.dataTransfer.effectAllowed to declare copy or move intent, and updating a status label to confirm the drag has started. It connects the first moment of a drag gesture to JavaScript without a full page reload.

Do not confuse ondragstart with ondragover—that fires on the drop target while hovering. dragstart fires on the source exactly once. Unlike ondrag (repeated while moving) or ondragend (once when released), dragstart is where you must call setData for drop targets to receive data via getData. Avoid alert() in handlers; update visible status text instead.

📝 Syntax

Set ondragstart on a draggable source or assign element.ondragstart:

<script>

  function handleDragStart(event) {

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

    event.dataTransfer.effectAllowed = "move";

    document.getElementById("status").textContent = "dragstart — setData called.";

  }

</script>



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

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

Syntax Rules

• Value is JavaScript code executed once when the user begins dragging the element.
• dragstart fires on the draggable source, not on drop targets.
• Set draggable="true" on the source element.
• Call event.dataTransfer.setData(type, value) so drop targets can read the payload.
• Optional: set event.dataTransfer.effectAllowed to copy, move, link, or combinations.
• Optional: call event.dataTransfer.setDragImage(element, x, y) for a custom drag ghost.
• JavaScript: element.ondragstart = function(event) { … }.
• Modern alternative: element.addEventListener("dragstart", handler).

💎 Values

The ondragstart attribute accepts a string of JavaScript code:

• ondragstart="handleDragStart(event)" — Call a named function with the event object.
• ondragstart="event.dataTransfer.setData('text/plain', 'data')" — Minimal inline setData.
• JavaScript: source.ondragstart = (e) => { e.dataTransfer.setData(…); … } assigns the handler.
• Set event.dataTransfer.effectAllowed inside the handler to declare permitted operations.

const source = document.getElementById("dragSource");



source.addEventListener("dragstart", (event) => {

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

  event.dataTransfer.effectAllowed = "move";

  document.getElementById("status").textContent =

    "dragstart — setData enables drop target getData.";

});



document.getElementById("dragSource").ondragstart = function (event) {

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

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

};

Applicable Elements

ondragstart vs ondrag vs ondragend vs ondrop

Examples Gallery

Inline ondragstart with setData and status text, dynamic element.ondragstart assignment, and a full mini workflow where dragstart sets data and the drop zone reads it on drop.

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

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



<script>

  function handleDragStart(event) {

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

    event.dataTransfer.effectAllowed = "move";

    document.getElementById("msg").textContent = "dragstart — setData called.";

  }

</script>

<script>

  document.getElementById("dynamicDraggable").ondragstart = function (event) {

    event.dataTransfer.setData("text/plain", "Dynamic payload");

    event.dataTransfer.effectAllowed = "copyMove";

    document.getElementById("log").textContent =

      "Dynamic dragstart — setData called.";

  };



  // Or preferred form:

  document.getElementById("dynamicDraggable").addEventListener("dragstart", handler);

</script>

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

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

  event.dataTransfer.effectAllowed = "move";

});



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

  event.preventDefault();

});



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

  event.preventDefault();

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

  status.textContent = "drop — 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 drag state — Use aria-live regions when dragstart updates status text so screen reader users know a drag has begun.
• Avoid alert() on dragstart — Inline status text or visible UI updates are more accessible than modal alerts at drag start.
• Do not rely on drag alone — Finalize important actions in accessible controls, not only after a drag gesture.
• Visible focus — Ensure draggable elements have sufficient color contrast and do not hide focus outlines.

💡 Best Practices