Drag and DropBaseline · Widely available
The Drag and Drop API lets users drag and drop elements and external files such as images onto web pages. Developers can customize which elements can become draggable, the type of feedback the draggable elements produce, and the droppable elements.
Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jul 29, 2015. Widely available since Jan 29, 2018.
Browser support
DesktopChrome
1–2Not supported
3+Supportedsince Sep 15, 2009
Current: 155Edge
12+Supportedsince Jul 29, 2015
Current: 154Firefox
1–3Not supported
3.5+Supportedsince Jun 30, 2009
Current: 157Safari
1–3.1Not supported
4+Supportedsince Jun 8, 2009
Current: 27MobileChrome Android
18+Supportedsince Jun 27, 2012
Current: 155Firefox Android
4+Supportedsince Mar 29, 2011
Current: 157Safari iOS
1–3Not supported
3.2+Supportedsince Apr 3, 2010
Current: 27How to use
This feature is Baseline widely available — use it freely, no fallback needed.
Example
Full syntax and examples are on MDN: DataTransfer.
Feature detection
JS · check before using
if ("DataTransfer" in globalThis) {
// DataTransfer is available
} else {
// load a polyfill or use a fallback
}Documentation (MDN)
Specification
Usage share
Sub-features
Support for each part of the feature (33). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| DataTransfer | 3 | 12 | 3.5 | 4 | 18 | 4 | 3.2 |
| DataTransfer.DataTransfer | 59 | 17 | 62 | 14.1 | 59 | 62 | 14.5 |
| DataTransfer.clearData | 3 | 12 | 3.5 | 4 | 18 | 4 | 3.2 |
| DataTransfer.dropEffect | 3 | 12 | 3.5 | 4 | 18 | 4 | 3.2 |
| DataTransfer.effectAllowed | 3 | 12 | 3.5 | 4 | 18 | 4 | 3.2 |
| DataTransfer.files | 3 | 12 | 3.6 | 4 | 18 | 4 | 3.2 |
| DataTransfer.getData | 3 | 12 | 3.5 | 4 | 18 | 4 | 3.2 |
| DataTransfer.items | 3 | 12 | 50 | 11.1 | 18 | 52 | 11.3 |
| DataTransfer.setData | 3 | 12 | 3.5 | 5 | 18 | 4 | 5 |
| DataTransfer.setDragImage | 3 | 18 | 3.5 | 4 | 18 | 4 | 3.2 |
| DataTransfer.types | 3 | 12 | 3.5 | 4 | 18 | 4 | 3.2 |
| DataTransferItem | 11 | 12 | 50 | 5.1 | 18 | 50 | 5 |
| DataTransferItem.getAsFile | 11 | 12 | 50 | 5.1 | 18 | 50 | 5 |
| DataTransferItem.getAsFileSystemHandle | 86 | 86 | ✕ | ✕ | 132 | ✕ | ✕ |
| DataTransferItem.getAsString | 11 | 12 | 50 | 5.1 | 18 | 50 | 5 |
| DataTransferItem.kind | 11 | 12 | 50 | 5.1 | 18 | 50 | 5 |
| DataTransferItem.type | 11 | 12 | 50 | 5.1 | 18 | 50 | 5 |
| DataTransferItemList | 13 | 12 | 50 | 6 | 18 | 50 | 6 |
| DataTransferItemList.add | 13 | 12 | 50 | 6 | 18 | 50 | 6 |
| DataTransferItemList.clear | 13 | 12 | 50 | 6 | 18 | 50 | 6 |
Show 13 more
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| DataTransferItemList.length | 13 | 12 | 50 | 6 | 18 | 50 | 6 |
| DataTransferItemList.remove | 31 | 12 | 50 | 6 | 31 | 50 | 6 |
| DragEvent | 46 | 12 | 3.5 | 14 | 46 | 4 | 14 |
| DragEvent.DragEvent | 46 | 12 | 3.5 | 14 | 46 | 4 | 14 |
| DragEvent.dataTransfer | 46 | 12 | 3.5 | 14 | 46 | 4 | 14 |
| HTMLElement.drag_event | 1 | 12 | 9 | 3.1 | 18 | 9 | 2 |
| HTMLElement.dragend_event | 1 | 12 | 9 | 3.1 | 18 | 9 | 2 |
| HTMLElement.dragenter_event | 1 | 12 | 9 | 3.1 | 18 | 9 | 2 |
| HTMLElement.draggable | 4 | 12 | 2 | 5 | 18 | 4 | 4 |
| HTMLElement.dragleave_event | 1 | 12 | 9 | 3.1 | 18 | 9 | 2 |
| HTMLElement.dragover_event | 1 | 12 | 9 | 3.1 | 18 | 9 | 2 |
| HTMLElement.dragstart_event | 1 | 12 | 9 | 3.1 | 18 | 9 | 2 |
| HTMLElement.drop_event | 1 | 12 | 9 | 3.1 | 18 | 9 | 2 |