<!doctype html>
<html>
	<head>
		<title>Drag and drop passing over body with all events handled at body</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;
	margin-left: 200px;
	background: blue;
	display: inline-block;
}
		</style>
		<script type="text/javascript">
window.onload = function () {
	var drag = document.getElementsByTagName('div')[0], drop = document.getElementsByTagName('div')[1], sequence = [];
	function targ(el) {
		if( el == drag ) { return 'drag'; }
		else if( el == drop ) { return 'drop'; }
		else if( el == document.body ) { return 'body'; }
		else { return el; }
	}
	document.body.ondragstart = function (e) {
		e.dataTransfer.setData('text','data');
		e.dataTransfer.effectAllowed = 'copy';
	};
	document.body.ondragenter = function (e) {
		e.preventDefault();
		sequence[sequence.length] = targ(e.target)+'.ondragenter';
	};
	document.body.ondragover = function (e) {
		e.preventDefault();
		var seqname = targ(e.target)+'.ondragover';
		if( sequence[sequence.length-1] != seqname ) {
			sequence[sequence.length] = seqname;
		}
	};
	document.body.ondrop = function (e) {
		e.preventDefault();
		sequence[sequence.length] = targ(e.target)+'.ondrop';
		sequence[sequence.length] = e.dataTransfer.getData('text');
	};
	document.body.ondragend = function (e) {
		sequence[sequence.length] = targ(e.target)+'.ondragend';
		sequence = sequence.join('=&gt;')
		var desiredsequence = (['drag.ondragenter','drag.ondragover','body.ondragenter','body.ondragover','drop.ondragenter','drop.ondragover','drop.ondrop','data','drag.ondragend']).join('=&gt;')
		if( sequence == desiredsequence ) {
			document.getElementsByTagName('div')[2].innerHTML = 'PASS';
		} else {
			document.getElementsByTagName('div')[2].innerHTML = 'FAIL, got:<br>'+sequence+'<br>instead of:<br>'+desiredsequence;
		}
	};
};
		</script>
	</head>
	<body>

		<div draggable="true"></div><div></div>
		<div>&nbsp;</div>
		<p>Drag the orange square onto the blue square and release it. For the entire duration of the drag, if supported by the platform, the mouse cursor should show as a drop-allowed or drop-copy-allowed cursor.</p>
		<noscript><p>Enable JavaScript and reload</p></noscript>

	</body>
</html>