WEB STANDARDS CREATIVITY

234
function getPosition(theElement)
{
var positionX = 0;
var positionY = 0;
while (theElement != null)
{
positionX += theElement.offsetLeft;
positionY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
return [positionX, positionY];
};
Getting the position of an element on a page is overly complicated, but there’s nothing to be done about it. An element can
discern its position only in relation to its “offset parent” (which varies according to the way it is positioned, floated, and so
on). To get its absolute location on the page, we have to recursively work our way up the offset parent tree (using
element.offsetParent), getting the positions of each of the offset parents along the way and adding them together to
return a total.
Once each of the modules inside a module area has been added to dragHotspots, there’s a special case where we add the
module area itself to dragHotspots. This is so we can recognize when the dragged module is below all other elements in the
module area; in which case, we move it right to the end.
The ghost
After the map is created, we need to create the visual element that will indicate to users that they are dragging something.
It’s actually a copy of the module that the user is dragging, and we make it look ghostly by changing its transparency, so I
call it the ghost.
We get the current position of the dragged module using getPosition(), and then we create the new ghost element. It’s an
absolutely positioned empty div wrapped around a direct copy of the dragged module. The empty div acts as a substitute for
the constraints of the module area div, giving the module a width to fill; otherwise, it would expand to a width of 100%. Because
it’s positioned absolutely and inserted at the end of the body element, it’s free to move wherever the user’s mouse cursor moves.
The copy of the dragged module is created using the cloneNode() method. cloneNode() takes one argument that specifies
whether you want the contents of the node to be copied as well, or just the node itself. By calling dragTarget.cloneNode(true),
we are saying we want a copy of dragTarget and its contents. We add that copy to the empty shell and then
position it over the original module, so it looks like the user is dragging the ghost out of its body. By applying a bit of CSS
opacity, we can give the ghost its ghostly appearance:
#ghost .module
{
opacity: 0.65;
filter: alpha(opacity=50);
}
You can see the result in Figure 9-13.
To track where the user is moving the mouse while the button is
pressed, we need to add a mousemove listener to the entire document.
We add a mouseup listener to tell us when the user has
released the mouse button.
Figure 9-13. The ghost copy of a module next to its original