038-proposed.html (3156B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Drag and drop without cancelling dragenter and without body or html</title> 5 <style type="text/css"> 6 body > div:first-child { 7 height: 100px; 8 width: 100px; 9 background: orange; 10 display: inline-block; 11 } 12 iframe { 13 height: 100px; 14 width: 100px; 15 margin-left: 100px; 16 display: inline-block; 17 border: none; 18 } 19 </style> 20 <script type="text/javascript"> 21 //Drag passes from parent to blue. Dragenter fires at blue. Root element is deleted. 22 //Dragenter is not cancelled. Body does not exist. Root element does not exist. 23 //Current target element is set to null. Drag now points at unrendered document - null. 24 //Current target element remains null. 25 //Drag passes over parent to orange. Dragenter fires at orange, and is cancelled. 26 window.onload = function () { 27 var orange = document.getElementsByTagName('div')[0], sequence = []; 28 orange.ondragstart = function (e) { 29 e.dataTransfer.setData('text','hello'); 30 e.dataTransfer.effectAllowed = 'copy'; 31 }; 32 orange.ondragenter = orange.ondrop = function (e) { 33 sequence[sequence.length] = 'orange.'+e.type; 34 e.preventDefault(); 35 }; 36 orange.ondragleave = function (e) { 37 sequence[sequence.length] = 'orange.dragleave'; 38 }; 39 orange.ondragover = function (e) { 40 if( sequence[sequence.length-1] != 'orange.dragover' ) { 41 sequence[sequence.length] = 'orange.dragover'; 42 } 43 e.preventDefault(); 44 }; 45 var blue = document.getElementsByTagName('iframe')[0].contentDocument; 46 if( !blue.documentElement ) { blue.appendChild(blue.createElement('html')); } 47 blue.documentElement.style.margin = '0'; 48 blue.documentElement.style.padding = '0'; 49 if( !blue.body ) { blue.documentElement.appendChild(blue.createElement('body')); } 50 blue.body.style.margin = '0'; 51 blue.body.style.padding = '0'; 52 var bluediv = blue.body.appendChild(blue.createElement('div')); 53 bluediv.style.height = '100px'; 54 bluediv.style.width = '100px'; 55 bluediv.style.background = 'blue'; 56 bluediv.ondragenter = bluediv.ondragover = function (e) { 57 sequence[sequence.length] = 'blue.'+e.type; 58 if( blue.documentElement ) { blue.removeChild(blue.documentElement); } 59 }; 60 blue.ondragenter = blue.ondragover = blue.ondragleave = function (e) { 61 if( e.target != this ) { return; } 62 sequence[sequence.length] = 'bluedocument.'+e.type; 63 }; 64 orange.ondragend = function (e) { 65 sequence = sequence.join('=>') 66 var desiredsequence = (['orange.dragenter','orange.dragover','orange.dragleave','blue.dragenter','orange.dragenter','orange.dragover','orange.drop']).join('=>') 67 if( sequence == desiredsequence ) { 68 document.getElementsByTagName('div')[1].innerHTML = 'PASS'; 69 } else { 70 document.getElementsByTagName('div')[1].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence; 71 } 72 }; 73 }; 74 </script> 75 </head> 76 <body> 77 78 <div draggable="true"></div><iframe src="about:blank"></iframe> 79 <div> </div> 80 <p>Drag the orange square onto the blue square, then back to the orange square, and release it.</p> 81 <noscript><p>Enable JavaScript and reload</p></noscript> 82 83 </body> 84 </html>