WEB STANDARDS CREATIVITY

Now we’re fully prepared for users to drag modules around. The last thing that mousedownH2() does is to stop the default
action of the mousedown. This prevents the browser from doing what it normally does when the user presses down the
mouse button. In a drag-and-drop situation, it stops text on the page from being selected while the ghost is being dragged.
As the user moves the mouse around, the document mousemove event listener will be constantly calling
mousemoveDocument():
function mousemoveDocument(event)
{
if (typeof event == "undefined")
{
event = window.event;
}
var ghost = document.getElementById("ghost");
if (ghost != null)
{
ghost.style.marginLeft = event.clientX - dragOrigin[0] + "px";
ghost.style.marginTop = event.clientY - dragOrigin[1] + "px";
}
var closest = null;
var closestY = null;
for (var i in dragHotspots)
{
var ghostX = parseInt(ghost.style.left, 10) + parseInt(ghost.style.marginLeft, 10);
var ghostY = parseInt(ghost.style.top, 10) + parseInt(ghost.style.marginTop, 10);
if (ghostX >= dragHotspots[i].offsetX -➥
dragHotspots[i].element.offsetWidth && ghostX distanceY)
{
closest = dragHotspots[i];
closestY = distanceY;
}
}
}
if (closest != null)
{
var ghostMarker = document.getElementById("ghostMarker");
if (ghostMarker == null)
{
ghostMarker = document.createElement("div");
ghostMarker.id = "ghostMarker";
chapter 9 Creating Dynamic Interfaces Using JavaScript
235