001.html (1749B)
1 <!doctype html> 2 <title>Interrupted drag with second drag attempt</title> 3 <style> 4 body > div { 5 height: 200px; 6 width: 200px; 7 background-color: orange; 8 display: inline-block; 9 } 10 body > div + div { 11 background-color: navy; 12 } 13 body > div + div + div { 14 background-color: fuchsia; 15 } 16 </style> 17 <script type="text/javascript"> 18 window.onload = function () { 19 var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], fuchsia = document.getElementsByTagName('div')[2]; 20 orange.ondragstart = function (e) { 21 e.dataTransfer.setData('text','PASS'); 22 e.dataTransfer.effectAllowed = 'all'; 23 }; 24 blue.ondragenter = function (e) { 25 alert('JS alert'); 26 }; 27 fuchsia.ondragenter = fuchsia.ondragover = function (e) { 28 e.preventDefault(); 29 }; 30 fuchsia.ondrop = function (e) { 31 document.getElementsByTagName('ol')[0].textContent = e.dataTransfer.getData('text'); 32 e.preventDefault(); 33 }; 34 }; 35 </script> 36 <div draggable="true"></div> 37 <div></div> 38 <div></div> 39 40 <ol> 41 <li>Drag the orange square over the blue square.</li> 42 <li>An alert may appear. Do not dismiss it. If an alert does not appear, PASS, and ignore any further steps.</li> 43 <li>Drag a file that your browser cannot open natively from your computer onto a blank part of the page. If a download dialog appears at any point after this, cancel it, and return to this page.</li> 44 <li>Dismiss the alert without using the left mouse button (eg. use keyboard, or mouse gestures such as gesture-down,gesture-right).</li> 45 <li>Do a short drag and drop within the pink square. If nothing happens, PASS, and ignore any further steps.</li> 46 <li>The word "PASS" should appear in place of this text.</li> 47 </ol>