releasemodifiersdrag-manual.html (3906B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Modifier keys being released before end of drag</title> 5 <style type="text/css"> 6 div:first-child { 7 height: 100px; 8 width: 100px; 9 background: orange; 10 display: inline-block; 11 } 12 div:first-child + div { 13 height: 100px; 14 width: 100px; 15 background: blue; 16 display: inline-block; 17 } 18 div:first-child + div + div { 19 height: 100px; 20 width: 100px; 21 background: fuchsia; 22 display: inline-block; 23 } 24 div:first-child + div + div + div { 25 height: 100px; 26 width: 100px; 27 background: yellow; 28 display: inline-block; 29 } 30 div { 31 font-family: monospace; 32 } 33 table { 34 display: inline-table; 35 margin-right: 1em; 36 border-collapse: collapse; 37 } 38 table, th, td { 39 border: 1px solid black; 40 } 41 thead th { 42 background: silver; 43 color: black; 44 } 45 </style> 46 <script type="text/javascript"> 47 window.onload = function () { 48 var bde, bdo, bdo2, fde, fdo, fdo2, yde, ydo, ydr; 49 var orange = document.getElementsByTagName('div')[0]; 50 orange.ondragstart = function (e) { 51 e.dataTransfer.setData('text','http://example.com/'); 52 e.dataTransfer.effectAllowed = 'linkMove'; 53 bde = bdo = bdo2 = fde = fdo = fdo2 = yde = ydo = ydr = ''; 54 }; 55 var blue = document.getElementsByTagName('div')[1]; 56 blue.ondragenter = function (e) { 57 e.preventDefault(); 58 bde = e.dataTransfer.dropEffect; 59 }; 60 blue.ondragover = function (e) { 61 e.preventDefault(); 62 if( !bdo ) { 63 bdo = e.dataTransfer.dropEffect; 64 } 65 //bdo2 always collects dropEffect, since it can change multiple times in rapid succession when pressing multiple modifiers 66 //test cares about the last dropEffect that was seen before leaving the blue square, and that will be stored in bdo2 67 bdo2 = e.dataTransfer.dropEffect; 68 }; 69 var fuchsia = document.getElementsByTagName('div')[2]; 70 fuchsia.ondragenter = function (e) { 71 e.preventDefault(); 72 fde = e.dataTransfer.dropEffect; 73 }; 74 fuchsia.ondragover = function (e) { 75 e.preventDefault(); 76 if( !fdo ) { fdo = e.dataTransfer.dropEffect; } 77 fdo2 = e.dataTransfer.dropEffect; 78 }; 79 var yellow = document.getElementsByTagName('div')[3]; 80 yellow.ondragenter = function (e) { 81 e.preventDefault(); 82 yde = e.dataTransfer.dropEffect; 83 }; 84 yellow.ondragover = function (e) { 85 e.preventDefault(); 86 if( !ydo ) { ydo = e.dataTransfer.dropEffect; } 87 }; 88 yellow.ondrop = function (e) { 89 e.preventDefault(); 90 ydr = e.dataTransfer.dropEffect; 91 }; 92 orange.ondragend = function (e) { 93 var sequence = ([bde,bdo,bdo2,fde,fdo,fdo2,yde,ydo,ydr,e.dataTransfer.dropEffect]).join('=>') 94 var desiredsequence = (['link','link','move','move','move','link','link','link','link','link']).join('=>') 95 if( sequence == desiredsequence ) { 96 document.getElementsByTagName('div')[4].innerHTML = 'PASS'; 97 } else { 98 document.getElementsByTagName('div')[4].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; 99 } 100 }; 101 }; 102 </script> 103 </head> 104 <body> 105 106 <div draggable="true"></div> 107 <div></div> 108 <div></div> 109 <div></div> 110 <div><strong> </strong></div> 111 <ol> 112 <li>Drag the orange square over the blue square</li> 113 <li>Press the relevant modifier keys for your platform to request a "move" drop effect (eg. Shift on Windows/Unix/Linux, Command on Mac)</li> 114 <li>If supported by the platform, the mouse cursor should show that a "move" drop effect will be used</li> 115 <li>Continue dragging over the pink square</li> 116 <li>Release the modifier keys</li> 117 <li>If supported by the platform, the mouse cursor should show that a "link" drop effect will be used</li> 118 <li>Continue dragging over the yellow square</li> 119 <li>Release the drag</li> 120 <li>Fail if no new text appears above this list</li> 121 </ol> 122 <noscript><p>Enable JavaScript and reload</p></noscript> 123 124 </body> 125 </html>