025.html (2252B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Dragover repeating</title> 5 <style type="text/css"> 6 div:first-child { 7 height: 100px; 8 width: 100px; 9 background: orange; 10 display: inline-block; 11 } 12 div:first-child + div { 13 height: 100px; 14 width: 100px; 15 background: blue; 16 display: inline-block; 17 } 18 </style> 19 <script type="text/javascript"> 20 window.onload = function () { 21 var numsecs = 5, maxpolltime = 0.550, minpolltime = 0.150; 22 var blue = document.getElementsByTagName('div')[1], p = document.getElementsByTagName('p')[0]; 23 var numfired = 0, readytocount = false; 24 document.getElementsByTagName('div')[0].ondragstart = function (e) { 25 e.dataTransfer.effectAllowed = 'all'; 26 e.dataTransfer.setData('text','dummy text'); 27 }; 28 blue.ondrop = function (e) { 29 e.preventDefault(); 30 }; 31 blue.ondragover = function (e) { 32 e.preventDefault(); 33 if( readytocount ) { numfired++; } 34 }; 35 blue.ondragenter = function (e) { 36 e.preventDefault(); 37 p.innerHTML = 'Keep the mouse perfectly still...'; 38 //give the tester a second to get ready 39 setTimeout(function () { 40 readytocount = true; 41 numfired = 0; 42 p.innerHTML = 'Keep the mouse perfectly still for '+numsecs+' seconds'; 43 var countsecs = numsecs; 44 var intr = setInterval(function () { 45 countsecs--; 46 if( countsecs ) { 47 p.innerHTML = 'Keep the mouse perfectly still for '+countsecs+' seconds'; 48 } else { 49 clearInterval(intr); 50 var passed = numfired >= Math.floor( numsecs / maxpolltime ) && numfired <= Math.floor( numsecs / minpolltime ); 51 document.getElementsByTagName('p')[0].innerHTML = ( passed ? 'PASS' : 'FAIL' ) + 52 '<br><br>(Fired ' + numfired + ' times in ' + numsecs + ' seconds, must be between ' + 53 Math.floor( numsecs / maxpolltime ) + ' and ' + Math.floor( numsecs / minpolltime ) + ')<br>You can release the drag now'; 54 } 55 },1000); 56 },1000); 57 }; 58 }; 59 </script> 60 </head> 61 <body> 62 63 <div draggable="true"></div> 64 <div></div> 65 <p>Drag the orange square over the blue square, then keep the mouse perfectly still until the result appears.</p> 66 <noscript><p>Enable JavaScript and reload</p></noscript> 67 68 </body> 69 </html>