003-1.html (5433B)
1 <!DOCTYPE html> 2 <title>drag & drop - cross-document data drop</title> 3 <style> 4 body > div { 5 height: 200px; 6 width: 200px; 7 background-color: blue; 8 } 9 </style> 10 11 <script> 12 window.onload = function() { 13 var blue = document.getElementsByTagName('div')[0], fails = []; 14 blue.ondragover = blue.ondragenter = function(e) { 15 e.preventDefault(); 16 e.dataTransfer.dropEffect = 'copy'; 17 if( !parent.evs[e.type] ) { parent.evs[e.type] = {}; } 18 parent.evs[e.type].dataTransfer = e.dataTransfer; 19 parent.evs[e.type].items = e.dataTransfer.items; 20 parent.evs[e.type].types = e.dataTransfer.types; 21 parent.evs[e.type].files = e.dataTransfer.files; 22 if( parent.evs[e.type].dataTransfer != e.dataTransfer ) { 23 fails[fails.length] = '.dataTransfer is not returning the same object during '+e.type; 24 } 25 if( !e.dataTransfer.items ) { 26 fails[fails.length] = '.items is not returning anything during '+e.type; 27 } else if( parent.evs[e.type].items !== e.dataTransfer.items ) { 28 fails[fails.length] = '.items is not returning the same object during '+e.type; 29 } 30 if( !e.dataTransfer.types ) { 31 fails[fails.length] = '.types is not returning anything during '+e.type; 32 } else if( parent.evs[e.type].types !== e.dataTransfer.types ) { 33 fails[fails.length] = '.types is not returning the same object during '+e.type; 34 } 35 if( !e.dataTransfer.files ) { 36 fails[fails.length] = '.files is not returning anything during '+e.type; 37 } else if( parent.evs[e.type].files !== e.dataTransfer.files ) { 38 fails[fails.length] = '.files is not returning the same object during '+e.type; 39 } 40 //http://dev.w3.org/html5/spec/dnd.html#datatransfer 41 //"The * attribute must return a * object associated with the DataTransfer object." 42 //Note that it is associated with the DataTransfer object, *not* the data store 43 //http://dev.w3.org/html5/spec/dnd.html#dragevent 44 //"when a user agent is required to fire a DND event named e at an element, using a particular drag data store... 45 //Let dataTransfer be a newly created DataTransfer object associated with the given drag data store." 46 //A new DataTransfer object therefore means a new set of properties, not the same ones as last event 47 if( parent.evs.dragstart.dataTransfer === e.dataTransfer ) { 48 fails[fails.length] = '.dataTransfer is returning the same object during '+e.type+' as it did during dragstart'; 49 } 50 if( e.dataTransfer.items && parent.evs.dragstart.items === e.dataTransfer.items ) { 51 fails[fails.length] = '.items is returning the same object during '+e.type+' as it did during dragstart'; 52 } 53 if( e.dataTransfer.types && parent.evs.dragstart.types === e.dataTransfer.types ) { 54 fails[fails.length] = '.types is returning the same object during '+e.type+' as it did during dragstart'; 55 } 56 if( e.dataTransfer.files && parent.evs.dragstart.files === e.dataTransfer.files ) { 57 fails[fails.length] = '.files is returning the same object during '+e.type+' as it did during dragstart'; 58 } 59 }; 60 blue.ondrop = function(e) { 61 parent.evs[e.type] = {}; 62 parent.evs[e.type].dataTransfer = e.dataTransfer; 63 parent.evs[e.type].items = e.dataTransfer.items; 64 parent.evs[e.type].types = e.dataTransfer.types; 65 parent.evs[e.type].files = e.dataTransfer.files; 66 if( parent.evs[e.type].dataTransfer !== e.dataTransfer ) { 67 fails[fails.length] = '.dataTransfer is not returning the same object during '+e.type; 68 } 69 if( !e.dataTransfer.items ) { 70 fails[fails.length] = '.items is not returning anything during '+e.type; 71 } else if( parent.evs[e.type].items !== e.dataTransfer.items ) { 72 fails[fails.length] = '.items is not returning the same object during '+e.type; 73 } 74 if( !e.dataTransfer.types ) { 75 fails[fails.length] = '.types is not returning anything during '+e.type; 76 } else if( parent.evs[e.type].types !== e.dataTransfer.types ) { 77 fails[fails.length] = '.types is not returning the same object during '+e.type; 78 } 79 if( !e.dataTransfer.files ) { 80 fails[fails.length] = '.files is not returning anything during '+e.type; 81 } else if( parent.evs[e.type].files !== e.dataTransfer.files ) { 82 fails[fails.length] = '.files is not returning the same object during '+e.type; 83 } 84 if( parent.evs.dragstart.dataTransfer === e.dataTransfer ) { 85 fails[fails.length] = '.dataTransfer is returning the same object during '+e.type+' as it did during dragstart'; 86 } 87 if( e.dataTransfer.items && parent.evs.dragstart.items === e.dataTransfer.items ) { 88 fails[fails.length] = '.items is returning the same object during '+e.type+' as it did during dragstart'; 89 } 90 if( e.dataTransfer.types && parent.evs.dragstart.types === e.dataTransfer.types ) { 91 fails[fails.length] = '.types is returning the same object during '+e.type+' as it did during dragstart'; 92 } 93 if( e.dataTransfer.files && parent.evs.dragstart.files === e.dataTransfer.files ) { 94 fails[fails.length] = '.files is returning the same object during '+e.type+' as it did during dragstart'; 95 } 96 document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS'; 97 }; 98 }; 99 </script> 100 101 <p>Drag the orange square onto the blue square. Fail if this text does not change.</p> 102 <div></div> 103 104 <noscript><p>Enable JavaScript and reload</p></noscript>