Master HTML5 Drag‑and‑Drop: Events, dataTransfer, and Sorting Tutorial

HTML5 provides a built‑in drag‑and‑drop API that simplifies implementing drag‑and‑drop effects without extensive JavaScript.

To make an element draggable, set its draggable attribute to true; elements like img and a are draggable by default and can be disabled by setting the attribute to false.

Drag‑and‑Drop Events

During a drag operation, the source element passes through several objects: the source (origin), process (intermediate), and target (drop destination), each generating specific events.

Source Object Events

dragstart – the source begins dragging.

drag – the source is being dragged.

dragend – the source finishes dragging.

Process Object Events

dragenter – the source enters a new element.

dragover – the source moves within an element.

dragleave – the source leaves an element.

Target Object Event

drop – the source is released onto the target element.

dataTransfer Object

All drag‑and‑drop events expose a dataTransfer object used to transfer data between source and target.

setData()

Stores data in the dataTransfer object. The first argument specifies the data type, currently supporting:

text/plain – plain text.

text/html – HTML markup.

text/xml – XML markup.

text/uri-list – a list of URLs, one per line.

The second argument is the actual data to store.

getData()

Retrieves data from dataTransfer using the type specified in setData.

clearData()

Clears stored data; if a type is provided, only that type is cleared, otherwise all data is removed.

setDragImage()

Sets a custom drag image using an img element and optional X/Y offsets relative to the cursor.

effectAllowed and dropEffect

These properties control the visual feedback of the drag operation. Note that Internet Explorer does not support the dataTransfer object at all.

Implementing Drag‑and‑Drop Sorting

To create a sortable list using the drag‑and‑drop API, follow these steps:

Make each list item draggable by setting draggable="true".

Listen for dragstart on each item and apply a visual style to the source.

Listen for dragenter on items; when the source enters an item, insert the source before that item to achieve reordering.

Because the source cannot be moved after the last item, also listen for dragleave on the last item and, when triggered, append the source to the end of the list.

Key code illustration:

Full source code is available at https://github.com/lin-xin/blog/tree/master/drag-demo .

Compatibility

Internet Explorer has limited support; the sortable demo works in IE10, but drag‑leave events may not fire if elements lack a defined height.

iOS and Android browsers do not support the API natively. A shim plugin ( ios-html5-drag-drop-shim) can be included to enable drag‑and‑drop on mobile devices.