W3cubDocs

/Support Tables

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
    147 144    
    146 143 TP  
    145 142 26.1  
11 (2,3) 141 144 141 26.0 122
10 (2,3) 140 143 140 18.5-18.6 121
9 (1,3) 139 142 139 18.4 120
8 (1,3) 138 141 138 18.3 119
Show all
7 (1,3) 137 140 137 18.2 118
6 (1,3) 136 139 136 18.1 117
5.5 (1,3) 135 138 135 18.0 116
  134 137 134 17.6 115
  133 136 133 17.5 114
  132 135 132 17.4 113
  131 134 131 17.3 112
  130 133 130 17.2 111
  129 132 129 17.1 110
  128 131 128 17.0 109
  127 130 127 16.6 108
  126 129 126 16.5 107
  125 128 125 16.4 106
  124 127 124 16.3 105
  123 126 123 16.2 104
  122 125 122 16.1 103
  121 124 121 16.0 102
  120 123 120 15.6 101
  119 122 119 15.5 100
  118 121 118 15.4 99
  117 120 117 15.2-15.3 98
  116 119 116 15.1 97
  115 118 115 15 96
  114 117 114 14.1 95
  113 116 113 14 94
  112 115 112 13.1 93
  111 114 111 13 92
  110 113 110 12.1 91
  109 112 109 12 90
  108 111 108 11.1 89
  107 110 107 11 88
  106 109 106 10.1 87
  105 108 105 10 86
  104 107 104 9.1 85
  103 106 103 9 84
  102 105 102 8 83
  101 104 101 7.1 82
  100 103 100 7 81
  99 102 99 6.1 80
  98 101 98 6 79
  97 100 97 5.1 78
  96 99 96 5 77
  95 98 95 4 76
  94 97 94 3.2 75
  93 96 93 3.1 74
  92 95 92   73
  91 94 91   72
  90 93 90   71
  89 92 89   70
  88 91 88   69
  87 90 87   68
  86 89 86   67
  85 88 85   66
  84 87 84   65
  83 86 83   64
  81 85 81   63
  80 84 80   62
  79 83 79   60
  18 82 78   58
  17 (2) 81 77   57
  16 (2) 80 76   56
  15 (2) 79 75   55
  14 (2) 78 74   54
  13 (2) 77 73   53
  12 (2) 76 72   52
    75 71   51
    74 70   50
    73 69   49
    72 68   48
    71 67   47
    70 66   46
    69 65   45
    68 64   44
    67 63   43
    66 62   42
    65 61   41
    64 60   40
    63 59   39
    62 58   38
    61 57   37
    60 56   36
    59 55   35
    58 54   34
    57 53   33
    56 52   32
    55 51   31
    54 50   30
    53 49   29
    52 48   28
    51 47   27
    50 46   26
    49 45   25
    48 44   24
    47 43   23
    46 42   22
    45 41   21
    44 40   20
    43 39   19
    42 38   18
    41 37   17
    40 36   16
    39 35   15
    38 34   12.1
    37 33   12
    36 32   11.6
    35 31   11.5
    34 30   11.1
    33 29   11
    32 28   10.6
    31 27   10.5
    30 26   10.0-10.1
    29 25   9.5-9.6
    28 24   9
    27 23    
    26 22    
    25 21    
    24 20    
    23 19    
    22 18    
    21 17    
    20 16    
    19 15    
    18 14    
    17 13    
    16 12    
    15 11    
    14 10    
    13 9    
    12 8    
    11 7    
    10 6    
    9 5    
    8 4    
    7      
    6      
    5      
    4      
    3.6      
    3.5      
    3      
    2      
Safari on iOS Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser KaiOS Browser
26.1                        
26.0 all 141 (4) 10 80 (4) 141 (4) 143 11 15.5 (4) 28 14.9 13.52 3.0-3.1
18.5-18.6   4.4.3-4.4.4 7 12.1     10   27     2.5
18.4   4.4   12         26      
18.3   4.2-4.3   11.5         25      
Show all
18.2   4.1   11.1         24      
18.1   4   11         23      
18.0   3   10         22      
17.6-17.7   2.3             21      
17.5   2.2             20      
17.4   2.1             19.0      
17.3                 18.0      
17.2                 17.0      
17.1                 16.0      
17.0                 15.0      
16.6-16.7                 14.0      
16.5                 13.0      
16.4                 12.0      
16.3                 11.1-11.2      
16.2                 10.1      
16.1                 9.2      
16.0                 8.2      
15.6-15.8                 7.2-7.4      
15.5                 6.2-6.4      
15.4                 5.0-5.4      
15.2-15.3                 4      
15.0-15.1                        
14.5-14.8                        
14.0-14.4                        
13.4-13.7                        
13.3                        
13.2                        
13.0-13.1                        
12.2-12.5                        
12.0-12.1                        
11.3-11.4                        
11.0-11.2                        
10.3                        
10.0-10.2                        
9.3                        
9.0-9.2                        
8.1-8.4                        
8                        
7.0-7.1                        
6.0-6.1                        
5.0-5.1                        
4.2-4.3                        
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 Element attached to the DOM _and within the viewport_ of the browser for .setDragImage.

  1. Partial support refers to no support for the dataTransfer.files or .types objects

  2. Partial support refers to not supporting .setDragImage

  3. Partial support refers to limited supported formats for dataTransfer.setData/getData.

  4. Not supported in Chromium browsers on Android 6 or older.

Bugs

  • Chrome strips out newlines from text/uri-list see bug

  • In Chrome, DataTransfer.addElement is not implemented. There is no other way to implement a draggable object which 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, an element won't drag unless the dragstart handler sets dataTransfer data (even if it doesn't get retrieved). Test case

  • In Firefox, drag and drop does not work when the page is served as application/xhtml+xml Mozilla Bug #751778, Mozilla Bug #1106160

  • In Firefox, the dragstart event does not fire on button elements. This effectively disables drag and drop for button elements.

  • Safari doesn't implement the DragEvent interface. It adds a dataTransfer property to MouseEvent instead. See WebKit bug #103423.

  • In Safari 8, after setting event.dataTransfer.dropEffect, the value in the drop event is always 'none'

  • In IE9-10, the draggable attribute could be effectively applied for a and img elements. For div and span elements you should call element.dragDrop() to start drag event.

  • In IE9-11, using "text/plain" as the format for event.dataTransfer.setData and event.dataTransfer.getData reportedly does not work 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).

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/dragndrop