JavaScript Examples Bible - UserWorks Technologies

118
JavaScript Examples Bible: The Essential Companion to JavaScript Bible
offsetX and offsetY variables (minus any scrolling that the body is subject to at
that instant). These offset values are necessary to let the scripts set the location of
the image during dragging (the location is set for the top-left corner of the image)
while keeping the cursor in the same location within the image as when the user
first presses the mouse.
As the user drags the image, the onMouseDown event handler fires repeatedly,
allowing the dragIt() function to continually update the location of the element
relative to the current cursor position (the event.clientX and event.clientY
properties). The global offset variables are subtracted from the cursor position to
preserve the relation of the image’s top-left corner to the initial cursor position at
mouse down.
Upon the user releasing the mouse button, the release() function turns off the
onMouseMove event handler (setting it to null). This prevents the event from being
processed at all during normal usage of the page. The selectedObj global variable
is also set to null, turning off the “switch” that indicates dragging is in session.
Listing 15-43: Dragging Elements with onMouseMove
onMouseMove Event Handler
#camap {position:absolute; left:20; top:120}
#ormap {position:absolute; left:80; top:120}
#wamap {position:absolute; left:140; top:120}
// global variables used while dragging
var offsetX = 0
var offsetY = 0
var selectedObj
var frontObj
// set document-level event handlers
document.onmousedown = engage
document.onmouseup = release
// positioning an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
obj.style.pixelLeft = x
obj.style.pixelTop = y
}
// setting the z-order of an object
function bringToFront(obj) {
if (frontObj) {
frontObj.style.zIndex = 0
}
frontObj = obj
frontObj.style.zIndex = 1
}
elementObject.onMouseMove