javascript

CHAPTER 9 ■ LISTENING FOR EVENTS
class. Taking a peek at our markup, that would be the element. So fine, if e does not have a target
member, add one that refers to srcElement for Internet Explorer 8 or earlier:
function drag(e) {
if (!e) e = window.event;
if (!e.target) e.target = e.srcElement;
function move(e) {
if (!e) e = window.event;
}
function drop(e) {
if (!e) e = window.event;
}
}
By the way, if you are wondering whether we will be recoding this as an advance conditional loader,
don’t. Other than redefining e and its members, there’s no workarounds for Internet Explorer 8 or
earlier. So our first cut will be our final one.
Where were we? Right. Now we don’t want to move the running tab, which is to say the
element. Rather, we want to move the wrapping the whole shebang, which is
e.target.parentNode. We’ll save that to a local variable aptly named wrapper. That way, both move() and
drop() can manipulate the later. But one thing we need to do straightaway is make sure wrapper
displays in front of any other content in the document so the user can always see it when dragging. To do
so, set its z-index to the return value of doZ(), a helper function we will write later (remind me if I forget).
We now have this:
function drag(e) {
if (!e) e = window.event;
if (!e.target) e.target = e.srcElement;
var wrapper = e.target.parentNode;
wrapper.style.zIndex = doZ();
function move(e) {
if (!e) e = window.event;
}
function drop(e) {
if (!e) e = window.event;
}
}
We just need to jot down some coordinates for move() to do calculations with later. First, we want to
save CSS values for left and top (stripped of their units of measure) to local variables named, well, left
and top, which we will use later to recalculate the new position of the panel. Then we want to save
clientX and clientY for the mousedown event to local variables named, you guessed it, clientX and
clientY. The clientX and clientY members of the event object provide those coordinates in pixels.
However, those are numbers, not strings. So, no "px" suffix to strip away with parseInt(). Note that
clientX and clientY are not in document coordinates because CSS values for left and top would need
to be when we reposition wrapper (in other words, clientX and clientY are the coordinates on the
current window rather than the position in the document). Still, we need clientX and clientY to
calculate left and top as well as to keep the visitors mouse pinned to the same spot on the Running tab
(you’ll see the actual calculations in the next section). We now have this:
function drag(e) {
if (!e) e = window.event;
if (!e.target) e.target = e.srcElement;
var wrapper = e.target.parentNode;
var left = parseInt(queryCascade(wrapper, "left"));
377