HTML Drag and Drop API

The Drag and Drop API lets users grab an element with their mouse and move it to another spot on the page. This is useful for sorting lists, organizing items, uploading files, or building interactive games.

What is Drag and Drop?

Drag and drop is a common feature. You “grab” an object (like an image or a box), drag it across the screen, and release it in a new location. You have probably used it to rearrange icons on your phone, move files between folders, or change the order of items in a list.

The HTML Drag and Drop API makes this possible in web pages with pure HTML and JavaScript.

Browser Support

The Drag and Drop API is supported in all modern browsers:

Simple Drag and Drop Example

This example lets you drag an image into a box. Try it:

If it works, you should see the W3Schools logo move from below the box into the box when you drop it.

How Drag and Drop Works – Step by Step

Drag and drop happens in three main steps:

1. Make something draggable – Add the draggable="true" attribute
2. Allow dropping somewhere – Prevent the default behavior with preventDefault()
3. Handle the drop – Get the dragged data and move it to the new location

Step 1: Make an Element Draggable

To make any element draggable, just add the draggable="true" attribute. This works on images, text, divs, headings, and links.

Notice that you can drag these elements, but there is no place to drop them yet.

Step 2: What to Drag (ondragstart and setData)

When you start dragging, the browser needs to know what data is being dragged. Use the ondragstart event and the setData() method.

function dragStart(event) {
  event.dataTransfer.setData("text", event.target.id);
}

This saves the ID of the dragged element. When you drop it later, the browser remembers what was dragged.

Step 3: Where to Drop (ondragover)

By default, you cannot drop things anywhere. To make an element accept a drop, you must prevent the default behavior using preventDefault() in the ondragover event.

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

Without this, the drop will not work.

Step 4: Handle the Drop (ondrop)

This is where the magic happens. When you release the dragged element over a valid drop zone, the ondrop event fires. Here you get the dragged data and move the element.

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}

This code gets the saved ID and moves the element into the drop zone.

Complete Drag and Drop Example (With Two Drop Zones)

This example lets you drag an image between two boxes:

Try dragging the smiley face from the left box to the right box, and back again.

Dragging Different Types of Elements

You can drag any HTML element. Here are examples with a heading and a link:

Real-World Uses for Drag and Drop

• Task lists (like Trello) – Drag tasks from “To Do” to “Done”
• File uploads – Drag files from your computer into a web page to upload
• E-commerce shopping carts – Drag products into a shopping cart
• Photo galleries – Reorder photos by dragging them
• Form builders – Drag form fields into your custom form
• Games – Drag and drop puzzles or matching games

Quick Summary

• Use draggable="true" to make an element draggable.
• Use ondragstart and setData() to save what is being dragged.
• Use ondragover and preventDefault() to allow dropping.
• Use ondrop and getData() to handle the drop.
• You can drag images, text, headings, divs, links, and almost any HTML element.

What Just Happened? Let Me Explain

• The draggable="true" attribute tells the browser “this element can be moved”.
• dataTransfer.setData() is like putting a label on the box you are moving. It says “this is the thing I am dragging”.
• preventDefault() tells the browser “do not do your normal behavior (like opening a link) and let me handle this instead”.
• dataTransfer.getData() reads that label when you drop and says “ok, this is what was dragged”.
• appendChild() moves the element from its old parent to the new drop zone.

Drag and Drop API Reference