037-spec.xhtml (3572B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>Drag and drop without cancelling dragenter and without body (spec compliant)</title> 4 <style type="text/css"> 5 head + div { 6 height: 100px; 7 width: 100px; 8 background: orange; 9 display: inline-block; 10 } 11 head + div + div { 12 height: 100px; 13 width: 100px; 14 margin-left: 100px; 15 background: blue; 16 display: inline-block; 17 } 18 </style> 19 <script type="text/javascript"><![CDATA[ 20 //Drag passes from orange to root element. Dragenter fires at root element. 21 //Dragenter is not cancelled. Body does not exist. Dragenter fires at document. 22 //Spec says the body (which does not exist) becomes current target element => null. 23 //Drag passes from root element to blue. Dragenter fires at blue. 24 //Dragenter is not cancelled. Body does not exist. Current target element is null. 25 //Dragenter fires at document. Current target is set to null again. 26 //Drag passes from blue to root element. Dragenter fires at root element. 27 //Dragenter is not cancelled. Body does not exist. Current target element is null. 28 //Dragenter is not cancelled. Body does not exist. Dragenter fires at document. 29 //Current target is set to null. Yet again. 30 //Drag passes from root element to orange. Dragenter fires at orange, and is cancelled. 31 window.onload = function () { 32 var orange = document.getElementsByTagName('div')[0], sequence = []; 33 orange.ondragstart = function (e) { 34 e.dataTransfer.setData('text','hello'); 35 e.dataTransfer.effectAllowed = 'copy'; 36 }; 37 orange.ondragenter = orange.ondrop = function (e) { 38 sequence[sequence.length] = 'orange.'+e.type; 39 e.preventDefault(); 40 }; 41 orange.ondragleave = function (e) { 42 sequence[sequence.length] = 'orange.dragleave'; 43 }; 44 orange.ondragover = function (e) { 45 if( sequence[sequence.length-1] != 'orange.dragover' ) { 46 sequence[sequence.length] = 'orange.dragover'; 47 } 48 e.preventDefault(); 49 }; 50 var blue = document.getElementsByTagName('div')[1]; 51 blue.ondragenter = blue.ondragover = blue.ondragleave = function (e) { 52 sequence[sequence.length] = 'blue.'+e.type; 53 }; 54 document.documentElement.ondragenter = document.documentElement.ondragleave = function (e) { 55 if( e.target != this ) { return; } 56 sequence[sequence.length] = 'html.'+e.type; 57 }; 58 document.documentElement.ondragover = function (e) { 59 if( e.target != this ) { return; } 60 if( sequence[sequence.length-1] != 'html.dragover' ) { 61 sequence[sequence.length] = 'html.dragover'; 62 } 63 }; 64 document.ondragenter = document.ondragleave = document.ondragover = document.ondragleave = function (e) { 65 if( e.target != this ) { return; } 66 sequence[sequence.length] = 'document.'+e.type; 67 }; 68 orange.ondragend = function (e) { 69 sequence = sequence.join('=>') 70 var desiredsequence = (['orange.dragenter','orange.dragover','html.dragenter','document.dragenter','orange.dragleave','blue.dragenter','document.dragenter','document.dragenter','orange.dragenter','orange.dragover','orange.drop']).join('=>') 71 if( sequence == desiredsequence ) { 72 document.getElementsByTagName('div')[2].textContent = 'PASS'; 73 } else { 74 document.getElementsByTagName('div')[2].textContent = 'FAIL, got: '+sequence+' instead of: '+desiredsequence; 75 } 76 }; 77 }; 78 ]]></script> 79 </head> 80 <!--body--> 81 82 <div draggable="true"></div><div></div> 83 <div> </div> 84 <p>Drag the orange square onto the blue square, then back to the orange square, and release it.</p> 85 <noscript><p>Enable JavaScript and reload</p></noscript> 86 87 <!--/body--> 88 </html>