WEB STANDARDS CREATIVITY

ghost.appendChild(dragTarget.cloneNode(true));
ghost.style.left = position[0] + "px";
ghost.style.top = position[1] + "px";
attachEventListener(document, "mousemove", mousemoveDocument, false);
attachEventListener(document, "mouseup", mouseupDocument, false);
event.returnValue = false;
if (typeof event.preventDefault != "undefined")
{
event.preventDefault();
}
return true;
};
After it does the normal event object abstraction, mousedownH2() then goes about finding exactly which element was clicked.
This should be theoretically possible just by referencing the this object, but unfortunately, Internet Explorer doesn’t assign this
object correctly when events are added using the W3C event model. Instead, we have to rely on the event object’s target element
property, which can be inaccurate if there are elements nested inside our event target, but it’s fine here because the h2
is the deepest element in this branch. Naturally, Internet Explorer doesn’t call this element target, as other browsers do; it’s
srcElement in Internet Explorer. So we have to check whether event.target exists (the standard property), and if it doesn’t,
use event.srcElement (the Internet Explorer property).
Once these differences have been sorted out, we create a reference to the parent node of the target element (the div surrounding
the h2) in a global variable called dragTarget, so that we can use it later in other functions.
After the target has been discerned, we then create some global variables that will help track what’s happening as the user
drags the module around. dragOrigin stores the coordinates of the original mousedown event. Whenever an event is fired,
event.clientX and event.clientY record the two coordinates that define the place on a page where an event occurred; in
this case, where the user pushed down the mouse button. It’s important to store this original location, because when the
user moves her mouse, we want to know how far she moved it from where she clicked originally.
A map of the page
dragHotspots is an array that stores the locations of all the possible places you could drag a module. You can think of it as
a sort of map. When users drag a module around, they aren’t changing its position to an arbitrary point on the page; instead,
they are actually changing its position relative to the other modules. So, instead of specifying a module’s destination in terms
of absolute coordinates, we are trying to describe its destination in terms of its location among the other modules: “move
the search module beneath the calendar module, but above the horoscope module.” In order to do this, we need to create
a map of the page indicating where all the other modules are. That way, when the dragged module is moved around the
page, we know whether the dragged module should be above or below each of the static modules. All that calculation is
done by the mousemove handler, though. For now, we’re just concerned with creating the map.
We could create the map inside the mousemove handler, but every time the mouse moved, the calculations would have to
be done again. Creating the map just once—when the mouse button is pressed—is more efficient.
To create the map, we look inside each of the module areas and iterate through all of the divs that have a class of module.
For those divs, we create a new object in the dragHotspots array that holds a reference to the module (element), the horizontal
page offset of the module’s top-left corner (offsetX), and the vertical page offset of the module’s top-left corner
(offsetY). Those last two properties get their values from the getPosition() function, which takes an element and returns
its position:
chapter 9 Creating Dynamic Interfaces Using JavaScript
233