Drop cursor

HTML5 drop event depends on cursor position.

by gimmel

HTML

<body>
    <div id="puzzle">
		<div class="piece"></div>
		<div class="piece"></div>
		<div class="piece"></div>
		<div class="piece"></div>
		<div id="drop" class="piece gap"></div>
		<div class="piece"></div>
		<div class="piece"></div>
		<div class="piece"></div>
		<div class="piece"></div>
	</div>
	<div id="drag" class="piece" draggable="true"></div>
    <p>Drop the orange rectangle to the puzzle gap. Grab the rectangle at different positions. The dragover event will be fired if the cursor is on the gap, even if the puzzle piece is mostly outside the gap.</p>
    <p>We need to write our own dragover event to achieve the expected „puzzle behavior“. That only works if the dragstart event provides the position where we clicked on the element and the drag event provides the actual cursor position. But Firefox unfortunately provides position 0,0 in the drag event.</p>
</body>

CSS

#puzzle {
	width: 300px;height:300px;
	margin-bottom:20px;
	background:#eee;
}
.piece {
	width:98px;height:98px;
	background:#800;
	border:1px solid #400;
    border-left-color:#c00;
    border-top-color:#c00;
	float:left;
}
.gap {
	background:#eee;
}
.drop {
	background:#ff0;
}
#drag {
	background: #c80;
	border:1px solid #640;
    border-left-color:#fc0;
    border-top-color:#fc0;
}
p {margin-left: 120px;}

JavaScript

var drop = document.getElementById("drop");

drop.addEventListener("dragover", function(ev){
	this.style.backgroundColor="#ff0";
});
drop.addEventListener("dragleave", function(ev){
	this.style.backgroundColor="#eee";
});