HTML dragstart DOM Event: Reference and Examples

When someone interacts with a webpage, the browser sends events to the relevant JavaScript code. The dragstart event happens when dragging begins on a draggable element.

When dragstart happens

Dragging begins on a draggable element.

You can listen for it using addEventListener(). That keeps event handling separate from HTML attributes such as onclick and works well with modern code organization.

A small working example

<div id="demo-target" draggable="true">Drag this card</div>
<p id="event-status" role="status">Waiting for dragstart...</p>
<script>
    const eventTarget = document.getElementById("demo-target");
    const eventStatus = document.getElementById("event-status");

    if (eventTarget) {
        eventTarget.addEventListener("dragstart", (eventDetails) => {
            eventStatus.textContent = "dragstart event received";
            console.log(eventDetails.type, eventDetails.target);
        });
    }
</script>

Reading the code

The browser listens for dragstart on the relevant target. When the event occurs, the callback receives eventDetails, updates the status message and logs the event name and target in Developer Tools.

Start dragging; dataTransfer can hold permitted drag data.

eventDetails.dataTransfer can hold drag data. Do not make dragging the only way to complete an action.

Try it in your browser

Open the page, show the Console panel, and follow this test: Start dragging; dataTransfer can hold permitted drag data. Then change one thing in the example and observe whether the event still fires.

Common Beginner Mistakes

• Expecting dragstart to fire without its required user action or browser condition.
• Start dragging; dataTransfer can hold permitted drag data.
• Adding repeated event listeners without considering cleanup or unwanted side effects.

Key Takeaways

• dragstart reports dragging begins on a draggable element.
• addEventListener("dragstart", ...) listens for the event on the appropriate target.
• Start dragging; dataTransfer can hold permitted drag data.