| <!doctype html> |
| <html> |
| <head> |
| <title>Drag repeating</title> |
| <style type="text/css"> |
| div:first-child { |
| height: 100px; |
| width: 100px; |
| background: orange; |
| display: inline-block; |
| } |
| div:first-child + div { |
| height: 100px; |
| width: 100px; |
| background: blue; |
| display: inline-block; |
| } |
| </style> |
| <script type="text/javascript"> |
| window.onload = function () { |
| var numsecs = 5, maxpolltime = 0.550, minpolltime = 0.150; |
| var orange = document.getElementsByTagName('div')[0], p = document.getElementsByTagName('p')[0]; |
| var numfired = 0, readytocount = false; |
| document.getElementsByTagName('div')[0].ondragstart = function (e) { |
| e.dataTransfer.effectAllowed = 'all'; |
| e.dataTransfer.setData('text','dummy text'); |
| p.innerHTML = 'Keep the mouse perfectly still...'; |
| //give the tester a second to get ready |
| setTimeout(function () { |
| readytocount = true; |
| numfired = 0; |
| p.innerHTML = 'Keep the mouse perfectly still for '+numsecs+' seconds'; |
| var countsecs = numsecs; |
| var intr = setInterval(function () { |
| countsecs--; |
| if( countsecs ) { |
| p.innerHTML = 'Keep the mouse perfectly still for '+countsecs+' seconds'; |
| } else { |
| clearInterval(intr); |
| var passed = numfired >= Math.floor( numsecs / maxpolltime ) && numfired <= Math.floor( numsecs / minpolltime ); |
| document.getElementsByTagName('p')[0].innerHTML = ( passed ? 'PASS' : 'FAIL' ) + |
| '<br><br>(Fired ' + numfired + ' times in ' + numsecs + ' seconds, must be between ' + |
| Math.floor( numsecs / maxpolltime ) + ' and ' + Math.floor( numsecs / minpolltime ) + ')<br>You can release the drag now'; |
| } |
| },1000); |
| },1000); |
| }; |
| orange.ondrag = function (e) { |
| if( readytocount ) { numfired++; } |
| }; |
| }; |
| </script> |
| </head> |
| <body> |
| |
| <div draggable="true"></div> |
| <p>Drag the orange square sideways until the drag placeholder appears, then keep the mouse perfectly still until the result appears.</p> |
| <noscript><p>Enable JavaScript and reload</p></noscript> |
| |
| </body> |
| </html> |
