001-1.html (1488B)
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( e.dataTransfer.getData('text') ) { 18 fails[fails.length] = '"' + e.dataTransfer.getData('text') + '" exposed during event ' + e.type; 19 } 20 }; 21 blue.ondrop = function(e) { 22 e.preventDefault(); 23 if( !e.dataTransfer.types.length ) { 24 fails[fails.length] = 'no types found during event drop'; 25 } 26 var foundtext = false; 27 for( var i = 0; i < e.dataTransfer.types.length; i++ ) { 28 if( e.dataTransfer.types[i] == 'text/plain' ) { 29 foundtext = true; 30 break; 31 } 32 } 33 if( !foundtext ) { 34 fails[fails.length] = 'text/plain type not found during event drop'; 35 } 36 if( e.dataTransfer.getData('text') != 'dummy text' ) { 37 fails[fails.length] = 'getData returned ' + e.dataTransfer.getData('text') + ' instead of "dummy text"'; 38 } 39 document.getElementsByTagName('p')[0].innerHTML = fails.length ? ( 'FAIL:<br>' + fails.join('<br>') ) : 'PASS'; 40 }; 41 }; 42 </script> 43 44 <p>Drag the orange square onto the blue square. Fail if this text does not change.</p> 45 <div></div> 46 47 <noscript><p>Enable JavaScript and reload</p></noscript>