HTML Drag and Drop API: Browser Support, Events, Issues

What is the HTML Drag and Drop API?

The HTML Drag and Drop API is a WHATWG specification that lets web pages drag and drop elements, selections, text, and files. The HTML Living Standard at WHATWG defines the DragEvent interface, the DataTransfer object, and the draggable attribute that turn any DOM node into a drag source or a drop target.

Which browsers does the HTML Drag and Drop API support?

Every modern desktop browser supports the HTML Drag and Drop API for mouse and trackpad input, with global usage above 94%. Mobile finger-drag support is the gap to plan around.

What are the HTML Drag and Drop events?

The HTML Drag and Drop API defines seven DragEvent types that fire on the source element and the drop target as the user drags, hovers, and releases. Wire only the events your app actually needs.

• dragstart: Fires on the source element when the user starts dragging. Populate event.dataTransfer.setData with the MIME type and payload the drop target reads.
• drag: Fires every few hundred milliseconds on the source while the drag is active. Most apps skip it because dragover already covers UI updates on the target.
• dragenter: Fires on a potential drop target when the dragged item first enters its bounding box. Call event.preventDefault() to mark the element as a valid drop zone.
• dragover: Fires repeatedly on the target while the dragged item is over it. Always call event.preventDefault() inside this handler, or the drop event never fires.
• dragleave: Fires when the dragged item leaves the target. Use it to clear hover styles like a dashed outline.
• drop: Fires on the target when the user releases the dragged item. Read event.dataTransfer.getData or event.dataTransfer.files to grab the payload.
• dragend: Fires on the source after the drag finishes, whether the drop succeeded or the user cancelled. Use it to reset source-side UI state.
• DragEvent.dataTransfer: The single property attached to every drag event. It exposes setData, getData, files, items, types, effectAllowed, dropEffect, and setDragImage.

How do you check if a browser supports the HTML Drag and Drop API?

Test for the draggable attribute on a sample element and the DragEvent constructor on window. Both checks are stable across Chrome, Edge, Firefox, Safari, Opera, and Samsung Internet, so a single in check separates supported browsers from legacy IE and the old Android Browser.

// Paste this into the DevTools console of any browser to confirm
// HTML Drag and Drop API support before wiring drag handlers.
const probe = document.createElement("div");

const supportsDragAndDrop =
  "draggable" in probe &&
  "ondragstart" in probe &&
  "ondrop" in probe &&
  typeof DragEvent === "function" &&
  typeof DataTransfer === "function";

if (supportsDragAndDrop) {
  console.log("HTML Drag and Drop API is supported in this browser.");
} else {
  console.log("HTML Drag and Drop API is missing. Use a Pointer Events fallback.");
}

// Touch input is a separate concern. Mobile Chrome, Firefox for Android,
// and Samsung Internet do not fire DragEvent from a finger.
if ("ontouchstart" in window) {
  console.log("Touchscreen detected. Add a mobile-drag-drop polyfill for finger drags.");
}

If the console prints "HTML Drag and Drop API is supported" but a finger drag still does nothing, the device is on Chrome for Android, Firefox for Android, or Samsung Internet. Use a Pointer Events polyfill like mobile-drag-drop for finger input on those browsers.

What are the known issues with the HTML Drag and Drop API?

The HTML Drag and Drop API is broadly available on desktop, but mobile touch input, the unimplemented dropzone attribute, and quirks in dataTransfer.items and setDragImage still trip up production apps.

• No touchscreen drag on mobile: Chrome for Android, Firefox for Android, and Samsung Internet do not fire DragEvent from a finger. Only a mouse, a trackpad, or an Apple Pencil on iPadOS 15+ triggers it. Ship a Pointer Events fallback for touch users.
• The dropzone attribute is dead: No browser shipped the HTML5 dropzone attribute. Use a JavaScript dragover handler that calls event.preventDefault() to mark drop targets instead.
• dataTransfer.items differs across engines: Chromium exposes the full DataTransferItemList with both string and File items; Firefox and Safari implement most of it but skip directories. Read event.dataTransfer.files for file drops to stay portable.
• setDragImage compatibility varies: Firefox accepts any DOM node, including off-screen ones. Chrome and Safari require an HTMLImageElement or a DOM-attached node inside the viewport, or the drag thumbnail falls back to the source.
• iOS gap until Safari 15: iPhones and iPads on iOS 14 and earlier never shipped DragEvent. Safari 15 added it for pointer and external trackpad input on iPadOS, and Chrome, Edge, and Firefox on iOS inherit it through WebKit.
• Internet Explorer is partial only: IE 5.5 to 11 expose a pre-HTML5 drag-and-drop surface that misses dataTransfer.items and file drops. The cleanest path is to drop IE support and migrate users to Chromium-based Edge.
• Cross-origin iframe drags are restricted: A drag that starts in one origin and lands in another iframe is gated by the same-origin policy. The drop target receives empty dataTransfer.types and dataTransfer.files when the source is cross-origin.

In my experience, the trap that bites every drag-and-drop integration once is the missing dragover preventDefault. The dragstart fires, the dragenter fires, but drop silently never fires because the target never marked itself as a drop zone. Always preventDefault inside dragover and the surprise goes away.

Citations

All HTML Drag and Drop API version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - HTML Drag and Drop API: developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
• MDN Web Docs - DragEvent interface: developer.mozilla.org/en-US/docs/Web/API/DragEvent
• MDN Web Docs - DataTransfer interface: developer.mozilla.org/en-US/docs/Web/API/DataTransfer
• MDN Web Docs - File drag and drop: developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
• MDN Web Docs - Drag operations: developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations
• WHATWG HTML Living Standard - Drag and drop: html.spec.whatwg.org/multipage/dnd.html
• Wikipedia - Drag and drop: en.wikipedia.org/wiki/Drag_and_drop
• web.dev - The HTML Drag and Drop API: web.dev/articles/drag-and-drop
• Apple Developer - WebKit DOM Programming Topics, Dragging and Dropping: developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/DragAndDrop.html
• WebKit blog - New WebKit Features in Safari 15: webkit.org/blog/11989/new-webkit-features-in-safari-15