Drag and Drop
Drag and Drop
Method of easily dragging and dropping elements on a page, requiring minimal JavaScript.
Spec | https://html.spec.whatwg.org/multipage/interaction.html#dnd |
---|---|
Status | WHATWG Living Standard |
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
57 | 62 | ||||
56 | 61 | TP | 48 | ||
16 (2) | 55 | 60 | 11 | 47 | |
11 (2,3) | 15 (2) | 54 | 59 | 10.1 | 46 |
10 (2,3) | 14 (2) | 53 | 58 | 10 | 45 |
9 (1,3) | 13 (2) | 52 | 57 | 9.1 | 44 |
8 (1,3) | 12 (2) | 51 | 56 | 9 | 43 |
Show all | |||||
7 (1,3) | 50 | 55 | 8 | 42 | |
6 (1,3) | 49 | 54 | 7.1 | 41 | |
5.5 (1,3) | 48 | 53 | 7 | 40 | |
47 | 52 | 6.1 | 39 | ||
46 | 51 | 6 | 38 | ||
45 | 50 | 5.1 | 37 | ||
44 | 49 | 5 | 36 | ||
43 | 48 | 4 | 35 | ||
42 | 47 | 3.2 | 34 | ||
41 | 46 | 3.1 | 33 | ||
40 | 45 | 32 | |||
39 | 44 | 31 | |||
38 | 43 | 30 | |||
37 | 42 | 29 | |||
36 | 41 | 28 | |||
35 | 40 | 27 | |||
34 | 39 | 26 | |||
33 | 38 | 25 | |||
32 | 37 | 24 | |||
31 | 36 | 23 | |||
30 | 35 | 22 | |||
29 | 34 | 21 | |||
28 | 33 | 20 | |||
27 | 32 | 19 | |||
26 | 31 | 18 | |||
25 | 30 | 17 | |||
24 | 29 | 16 | |||
23 | 28 | 15 | |||
22 | 27 | 12.1 | |||
21 | 26 | 12 | |||
20 | 25 | 11.6 | |||
19 | 24 | 11.5 | |||
18 | 23 | 11.1 | |||
17 | 22 | 11 | |||
16 | 21 | 10.6 | |||
15 | 20 | 10.5 | |||
14 | 19 | 10.0-10.1 | |||
13 | 18 | 9.5-9.6 | |||
12 | 17 | 9 | |||
11 | 16 | ||||
10 | 15 | ||||
9 | 14 | ||||
8 | 13 | ||||
7 | 12 | ||||
6 | 11 | ||||
5 | 10 | ||||
4 | 9 | ||||
3.6 | 8 | ||||
3.5 | 7 | ||||
3 | 6 | ||||
2 | 5 | ||||
4 |
iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|
11 | |||||||||||
10.3 | all | 56 | 10 | 37 | 59 | 54 | 11 | 11.4 | 5 | 1.2 | 7.12 |
10.0-10.2 | 4.4.3-4.4.4 | 7 | 12.1 | 10 | 4 | ||||||
9.3 | 4.4 | 12 | |||||||||
9.0-9.2 | 4.2-4.3 | 11.5 | |||||||||
Show all | |||||||||||
8.1-8.4 | 4.1 | 11.1 | |||||||||
8 | 4 | 11 | |||||||||
7.0-7.1 | 3 | 10 | |||||||||
6.0-6.1 | 2.3 | ||||||||||
5.0-5.1 | 2.2 | ||||||||||
4.2-4.3 | 2.1 | ||||||||||
4.0-4.1 | |||||||||||
3.2 |
Notes
dataTransfer.items
only supported by Chrome.
Currently no browser supports the dropzone
attribute.
Firefox supports any kind of DOM elements for .setDragImage
. Chrome must have either an HTMLImageElement
or any kind of DOM elements attached to the DOM and within the viewport of the browser for .setDragImage
.
Partial support refers to no support for the
dataTransfer.files
or.types
objectsPartial support refers to not supporting
.setDragImage
Partial support refers to limited supported formats for
dataTransfer.setData
/getData
.
Bugs
In Chrome, DataTransfer.addElement is not implemented. There is no other way to implement a draggable object, that updates during the drag due to some other circumstances (e.g. changes color on a valid drop spot), as it is just a static image if addElement is not supported.
In Firefox, the dragstart event does not fire on button elements. This effectively disables drag and drop for button elements.
In IE9-10 draggable attribute could be effectively applied for link and image elements. For div and span elements you should call 'element.dragDrop()' to start drag event.
In Safari 8, after setting
event.dataTransfer.dropEffect
, the value in thedrop
event is always'none'
Safari doesn't implement the
DragEvent
interface. It adds adataTransfer
property toMouseEvent
instead. See WebKit bug #103423.Chrome strips out newlines from
text/uri-list
see bugReportedly, using "text/plain" as the format for
event.dataTransfer.setData
andevent.dataTransfer.getData
does not work in IE9-11 and causes a JS error. The format needs to be "text", which seems to work in all the mainstream browsers (Chrome, Safari, Firefox, IE9-11, Edge).In Firefox, the dragging near the edge of scrollable regions does not cause scrolling
Resources
- HTML5 Doctor article
- Shopping cart demo
- Demo with link blocks
- WebPlatform Docs
- Polyfill for setDragImage in IE
- Implementing Native Drag and Drop
- iOS/Android shim for HTML 5 drag'n'drop
- Microsoft Edge setDragImage feature request on UserVoice
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=dragndrop