Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<html>
<head>
<title>Dragover 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 blue = document.getElementsByTagName('div')[1], 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');
};
blue.ondrop = function (e) {
e.preventDefault();
};
blue.ondragover = function (e) {
e.preventDefault();
if( readytocount ) { numfired++; }
};
blue.ondragenter = function (e) {
e.preventDefault();
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);
};
};
</script>
</head>
<body>
<div draggable="true"></div>
<div></div>
<p>Drag the orange square over the blue square, then keep the mouse perfectly still until the result appears.</p>
<noscript><p>Enable JavaScript and reload</p></noscript>
</body>
</html>