javascript

CHAPTER 9 ■ LISTENING FOR EVENTS
380
Writing the Mousemove Event Listener
One note of caution for those who are bad at math. There is some possibility that your head will explode
trying to comprehend how move() calculates left and top during the drag. So, maybe cover your ears
and close your eyes while we work on move(). Someone will give you a poke when we’re done to let you
know it’s safe to follow along again.
Now even though drag() will have returned prior to JavaScript ever calling move(), which it will do
rapid-fire during a drag, wrapper continues to refer to the Running by way of a closure. Therefore,
we can reposition the by changing wrapper.style.left and wrapper.style.top.
This is where things get tricky. Even though the clientX and clientY members of an event object are
in window coordinates, but CSS values for left and top are in document coordinates, we can use the
former to calculate the latter for the reason that the document does not scroll during the drag, while
move() is running.
With this in mind, we can calculate the CSS value for wrapper.style.left by adding the X
coordinate of the mousemove event in e.clientX to the local variable left and then subtracting the X
coordinate of the mousedown event. Finally, we concatenate "px" to that number:
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"));
var top = parseInt(queryCascade(wrapper, "top"));
var clientX = e.clientX;
var clientY = e.clientY;
wrapper.style.zIndex = doZ();
addListener(document, "mousemove", move, true);
addListener(document, "mouseup", drop, true);
burst(e);
thwart(e);
function move(e) {
if (!e) e = window.event;
wrapper.style.left = left + e.clientX - clientX + "px";
}
function drop(e) {
if (!e) e = window.event;
}
}
In the same way, we can calculate the CSS value for wrapper.style.top by adding the Y coordinate
of the mousemove event in e.clientY to the local variable top and then subtracting the Y coordinate of
the mousedown event. Finally, we concatenate "px" to that number:
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"));
var top = parseInt(queryCascade(wrapper, "top"));
var clientX = e.clientX;
var clientY = e.clientY;
wrapper.style.zIndex = doZ();
addListener(document, "mousemove", move, true);
addListener(document, "mouseup", drop, true);