WEB STANDARDS CREATIVITY

Then we can concern ourselves with the vertical distance between the ghost
and the static module. To do this, we measure the difference between the top
of the ghost and the top of the static module, and then compare it with the
minimum value already found. If the distance to the current static module is
less than the current minimum value, that becomes the new minimum value.
After all the dragHotspots entries have been checked against, we know
whether there is a suitable location for the dragged module to be inserted at,
and if so, where.
If there was a suitable location, we need to show this to the users, so that they
know where the dragged module will be inserted if they release the mouse
button. To do this, we create a new element called ghostMarker, which is simply
a thin, square block that sits at the top of the candidate insertion point.
The ghost marker is an absolutely positioned child of the body element, so to
position it, we use the coordinates of the closest static module. As you can
see in Figure 9-14, with a bit of CSS styling, the ghost marker gives a good
indication of where the dragged module is going to be inserted.
To make it easy for later insertion of the dragged module, we also create a
new property of ghostMarker that records which static module it is marking:
ghostMarker.marked.
If there wasn’t a suitable location for the dragged module to be inserted—the
user didn’t drag the ghost close enough to one of the static modules—then
we actually remove ghostMarker. So if the user moved the ghost from a suitable
location to an unsuitable one, it won’t still indicate that he can reposition
the dragged module.
The last operation in mousemoveDocument() again stops the default action that the browser would normally perform for a
mousemove, preventing unwanted actions from occurring while the user is dragging.
The repositioned module
When the user has decided where he wants to place the dragged module, or that he doesn’t want to move it, he will release
the mouse button. This is captured by mouseupDocument():
function mouseupDocument()
{
detachEventListener(document, "mousemove", mousemoveDocument, false);
var ghost = document.getElementById("ghost");
if (ghost != null)
{
ghost.parentNode.removeChild(ghost);
}
var ghostMarker = document.getElementById("ghostMarker");
if (ghostMarker != null)
{
if (!hasClass(ghostMarker.marked, "module"))
{
Figure 9-14. The ghost marker showing where
the dragged module will be inserted
chapter 9 Creating Dynamic Interfaces Using JavaScript
237