WEB STANDARDS CREATIVITY

236
document.getElementsByTagName("body")[0].appendChild(ghostMarker);
}
ghostMarker.marked = closest.element;
ghostMarker.style.left = closest.offsetX + "px";
ghostMarker.style.top = closest.offsetY + "px";
}
else
{
var ghostMarker = document.getElementById("ghostMarker");
}
if (ghostMarker != null)
{
ghostMarker.parentNode.removeChild(ghostMarker);
}
event.returnValue = false;
if (typeof event.preventDefault != "undefined")
{
event.preventDefault();
}
return true;
};
The first order of business for this function is to change the position of the ghost so that it looks like it’s following the user’s
mouse cursor. We do this by calculating how far the user has moved from the original mousedown point, and then setting
the margins on the ghost div to reflect this difference. The current coordinates of the mouse cursor are again obtained
using event.clientX and event.clientY, and the global dragOrigin variable is used for the original mousedown
coordinates.
mousedownDocument() then needs to use our map of the other modules to figure out the new insertion point of the dragged
module. We know the location of the ghost div, and we know the location of each of the static modules’ top-left corners,
so it’s quite easy to figure out which static module the ghost is nearest. We want to insert the dragged module before that
static module.
For each entry in dragHotspots, we do a quick test of the horizontal position of the ghost. If no part of the ghost is within
the width of the module area where the static module is located, we don’t want to consider it as a viable destination for the
dragged module. So we check whether the right edge of the ghost is right of the static module’s left edge and whether the left
edge of the ghost is left of the static module’s right edge. This means that some part of the ghost is overlapping the width of
the module area.