003.html (2266B)
1 <!doctype html> 2 <title>Interrupted drag with second in-document 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: yellow; 15 } 16 body > div + div + div + div { 17 background-color: fuchsia; 18 } 19 </style> 20 <script type="text/javascript"> 21 window.onload = function () { 22 var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1], yellow = document.getElementsByTagName('div')[2], fuchsia = document.getElementsByTagName('div')[3]; 23 orange.ondragstart = function (e) { 24 e.dataTransfer.setData('text','PASS'); 25 e.dataTransfer.effectAllowed = 'all'; 26 }; 27 yellow.ondragstart = function (e) { 28 e.dataTransfer.setData('text','FAIL'); 29 e.dataTransfer.effectAllowed = 'all'; 30 }; 31 blue.ondragenter = function (e) { 32 alert('JS alert'); 33 }; 34 fuchsia.ondragenter = fuchsia.ondragover = function (e) { 35 e.preventDefault(); 36 }; 37 fuchsia.ondrop = function (e) { 38 document.getElementsByTagName('ol')[0].textContent = e.dataTransfer.getData('text'); 39 e.preventDefault(); 40 }; 41 }; 42 </script> 43 <div draggable="true"></div> 44 <div></div> 45 <div draggable="true"></div> 46 <div></div> 47 48 <ol> 49 <li>Open this page in two separate tabs, and start on tab #1.</li> 50 <li>Drag the orange square over the blue square.</li> 51 <li>An alert may appear. Do not dismiss it. If an alert does not appear, PASS, and ignore any further steps.</li> 52 <li>Click the other tab to focus it (or focus it in whatever way works). If you cannot change tabs, PASS, and ignore any further steps.</li> 53 <li>On tab #2, drag the yellow square over the blue square. If you cannot drag the yellow square, PASS, and ignore any further steps.</li> 54 <li>An alert may appear. Do not dismiss it.</li> 55 <li>Return to tab #1.</li> 56 <li>Dismiss the alert without using the left mouse button (eg. use keyboard, or mouse gestures such as gesture-down,gesture-right).</li> 57 <li>Do a short drag and drop within the pink square. If nothing happens, PASS, and ignore any further steps.</li> 58 <li>The word "PASS" should appear in place of this text.</li> 59 </ol>