026.html (2106B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Drag 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 orange = document.getElementsByTagName('div')[0], 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 p.innerHTML = 'Keep the mouse perfectly still...'; 28 //give the tester a second to get ready 29 setTimeout(function () { 30 readytocount = true; 31 numfired = 0; 32 p.innerHTML = 'Keep the mouse perfectly still for '+numsecs+' seconds'; 33 var countsecs = numsecs; 34 var intr = setInterval(function () { 35 countsecs--; 36 if( countsecs ) { 37 p.innerHTML = 'Keep the mouse perfectly still for '+countsecs+' seconds'; 38 } else { 39 clearInterval(intr); 40 var passed = numfired >= Math.floor( numsecs / maxpolltime ) && numfired <= Math.floor( numsecs / minpolltime ); 41 document.getElementsByTagName('p')[0].innerHTML = ( passed ? 'PASS' : 'FAIL' ) + 42 '<br><br>(Fired ' + numfired + ' times in ' + numsecs + ' seconds, must be between ' + 43 Math.floor( numsecs / maxpolltime ) + ' and ' + Math.floor( numsecs / minpolltime ) + ')<br>You can release the drag now'; 44 } 45 },1000); 46 },1000); 47 }; 48 orange.ondrag = function (e) { 49 if( readytocount ) { numfired++; } 50 }; 51 }; 52 </script> 53 </head> 54 <body> 55 56 <div draggable="true"></div> 57 <p>Drag the orange square sideways until the drag placeholder appears, then keep the mouse perfectly still until the result appears.</p> 58 <noscript><p>Enable JavaScript and reload</p></noscript> 59 60 </body> 61 </html>