013.html (1372B)
1 <!DOCTYPE html> 2 <title>drag & drop - drag interrupted by alert must not break mouse interaction with UI</title> 3 <style> 4 body > div { 5 height: 200px; 6 width: 200px; 7 background-color: orange; 8 } 9 body > div + div { 10 margin-top: 10px; 11 height: 200px; 12 width: 200px; 13 background-color: blue; 14 } 15 </style> 16 17 <script> 18 window.onload = function() { 19 var orange = document.getElementsByTagName('div')[0], blue = document.getElementsByTagName('div')[1]; 20 orange.ondragstart = function(e) { 21 e.dataTransfer.effectAllowed = 'copy'; 22 e.dataTransfer.setData('text', 'dummy text'); 23 }; 24 blue.ondragover = function(e) { 25 e.preventDefault(); 26 e.dataTransfer.dropEffect = 'copy'; 27 if( !window.doneonce ) { 28 alert('2. It should also ideally be possible to dismiss this dialog with your mouse/pointing device (do not use mouse gestures).'); 29 } 30 window.doneonce = true; 31 }; 32 blue.ondragenter = function(e) { 33 e.preventDefault(); 34 e.dataTransfer.dropEffect = 'copy'; 35 alert('1. It should ideally be possible to dismiss this dialog with your mouse/pointing device (do not use mouse gestures).'); 36 }; 37 blue.ondrop = function(e) { 38 e.preventDefault(); 39 }; 40 }; 41 </script> 42 43 <p>Drag the orange square onto the blue square.</p> 44 <div draggable="true"></div> 45 <div></div> 46 47 <noscript><p>Enable JavaScript and reload</p></noscript>