025.html (6253B)
1 <!DOCTYPE html> 2 <title>drag & drop - writing to dropEffect</title> 3 <style> 4 body > div { 5 height: 200px; 6 width: 200px; 7 background-color: orange; 8 position: absolute; 9 top: 8px; 10 left: 8px; 11 } 12 body > div * { 13 display: none; 14 } 15 body > div + div { 16 background-color: navy; 17 left: 250px; 18 } 19 body > div + div + div { 20 background-color: fuchsia; 21 left: 500px; 22 } 23 p:first-of-type { 24 margin-top: 220px; 25 } 26 </style> 27 28 <script> 29 30 window.onload = function() { 31 var orange = document.getElementsByTagName('div')[0], fails = [], doneonce = false, seenevent = {}; 32 orange.ondragstart = function(e) { 33 e.dataTransfer.setData('Text', 'dummy text'); 34 e.dataTransfer.effectAllowed = 'all'; 35 if( seenevent[e.type] ) { return; } 36 seenevent[e.type] = true; 37 if( e.dataTransfer.dropEffect != 'none' ) { 38 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of none'; 39 } 40 try{ e.dataTransfer.dropEffect = 'move' } catch(err) { 41 fails[fails.length] = e.type + ' dropEffect threw on setting'; 42 } 43 if( e.dataTransfer.dropEffect != 'move' ) { 44 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move (seems to be readonly)'; 45 } 46 }; 47 orange.ondrag = orange.nextSibling.ondragleave = function(e) { 48 if( seenevent[e.type] ) { return; } 49 seenevent[e.type] = true; 50 if( e.dataTransfer.dropEffect != 'none' ) { 51 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of none'; 52 } 53 try{ e.dataTransfer.dropEffect = 'move' } catch(err) { 54 fails[fails.length] = e.type + ' dropEffect threw on setting'; 55 } 56 if( e.dataTransfer.dropEffect != 'move' ) { 57 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move (seems to be readonly)'; 58 } 59 }; 60 orange.nextSibling.ondragenter = function(e) { 61 e.preventDefault(); 62 if( seenevent[e.type] ) { return; } 63 seenevent[e.type] = true; 64 if( e.dataTransfer.dropEffect != 'copy' ) { 65 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of copy'; 66 } 67 try{ e.dataTransfer.dropEffect = 'move' } catch(err) { 68 fails[fails.length] = e.type + ' dropEffect threw on setting'; 69 } 70 if( e.dataTransfer.dropEffect != 'move' ) { 71 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move (seems to be readonly)'; 72 } 73 }; 74 orange.nextSibling.ondragover = function(e) { 75 e.preventDefault(); 76 if( seenevent[e.type] ) { 77 e.dataTransfer.dropEffect = 'link'; 78 return; 79 } 80 if( !doneonce ) { 81 if( e.dataTransfer.dropEffect != 'copy' ) { 82 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of copy'; 83 } 84 try{ e.dataTransfer.dropEffect = 'move' } catch(err) { 85 fails[fails.length] = e.type + ' dropEffect threw on setting'; 86 } 87 if( e.dataTransfer.dropEffect != 'move' ) { 88 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move (seems to be readonly)'; 89 } 90 doneonce = true; 91 } else { 92 seenevent[e.type] = true; 93 if( e.dataTransfer.dropEffect != 'copy' ) { 94 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of copy on second attempt'; 95 } 96 try{ e.dataTransfer.dropEffect = 'link' } catch(err2) { 97 fails[fails.length] = e.type + ' dropEffect threw on setting'; 98 } 99 if( e.dataTransfer.dropEffect != 'link' ) { 100 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of link on second attempt (seems to be readonly)'; 101 } 102 doneonce = true; 103 } 104 }; 105 orange.nextSibling.ondrop = function(e) { 106 e.preventDefault(); 107 if( seenevent[e.type] ) { return; } 108 seenevent[e.type] = true; 109 if( e.dataTransfer.dropEffect != 'link' ) { 110 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of link'; 111 } 112 try{ e.dataTransfer.dropEffect = 'move' } catch(err) { 113 fails[fails.length] = e.type + ' dropEffect threw on setting'; 114 } 115 if( e.dataTransfer.dropEffect != 'move' ) { 116 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move (seems to be readonly)'; 117 } 118 }; 119 orange.ondragend = function(e) { 120 if( seenevent[e.type] ) { return; } 121 seenevent[e.type] = true; 122 if( e.dataTransfer.dropEffect != 'move' ) { 123 //under-specified in the spec, but part of the spec related to cancelling a drag says: 124 //"set the current drag operation to the value of the dropEffect attribute of the DragEvent 125 //object's dataTransfer object as it stood after the event dispatch finished." 126 //this does not cover successful drags, but it makes sense to be consistent 127 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of move'; 128 } 129 try{ e.dataTransfer.dropEffect = 'copy' } catch(err) { 130 fails[fails.length] = e.type + ' dropEffect threw on setting'; 131 } 132 if( e.dataTransfer.dropEffect != 'copy' ) { 133 fails[fails.length] = e.type + ' dropEffect ' + e.dataTransfer.dropEffect + ' instead of copy (seems to be readonly)'; 134 } 135 if( !seenevent.dragstart ) { 136 fails[fails.length] = 'dragstart did not fire'; 137 } 138 if( !seenevent.drag ) { 139 fails[fails.length] = 'drag did not fire'; 140 } 141 if( !seenevent.dragenter ) { 142 fails[fails.length] = 'dragenter did not fire'; 143 } 144 if( !seenevent.dragover ) { 145 fails[fails.length] = 'dragover did not fire enough times'; 146 } 147 if( !seenevent.dragleave ) { 148 fails[fails.length] = 'dragleave did not fire'; 149 } 150 if( !seenevent.drop ) { 151 fails[fails.length] = 'drop did not fire'; 152 } 153 document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL: ' + fails.join('<br>') ) : 'PASS'; 154 }; 155 }; 156 157 </script> 158 159 <div draggable='true'></div><div></div><div></div> 160 161 <p>Use your pointing device to drag the orange box to the pink box, then back to the blue box, and release it.</p> 162 <noscript><p>Enable JavaScript and reload</p></noscript>