/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
Layer Dragging
.draggable {cursor:hand}
var engaged = false
var offsetX = 0
var offsetY = 0
function dragIt(evt) {
evt = (evt) ? evt : (window.event) ? window.event : ""
var targElem = (evt.target) ? evt.target : evt.srcElement
if (engaged) {
if (targElem.className == "draggable") {
while (targElem.id != "myLayer" && targElem.parentNode) {
targElem = targElem.parentNode
}
if (evt.pageX) {
targElem.style.left = evt.pageX - offsetX + "px"
targElem.style.top = evt.pageY - offsetY + "px"
} else {
targElem.style.left = evt.clientX - offsetX + "px"
targElem.style.top = evt.clientY - offsetY + "px"
}
return false
}
}
}
function engage(evt) {
evt = (evt) ? evt : (window.event) ? window.event : ""
var targElem = (evt.target) ? evt.target : evt.srcElement
if (targElem.className == "draggable") {
while (targElem.id != "myLayer" && targElem.parentNode) {
targElem = targElem.parentNode
}
if (targElem.id == "myLayer") {
engaged = true
if (evt.pageX) {
offsetX = evt.pageX - targElem.offsetLeft
offsetY = evt.pageY - targElem.offsetTop
} else {
offsetX = evt.offsetX - document.body.scrollLeft
offsetY = evt.offsetY - document.body.scrollTop
if (navigator.userAgent.indexOf("Win") == -1) {
offsetX += document.body.scrollLeft
offsetY += document.body.scrollTop
}
}
return false
}
}
}
function release(evt) {
evt = (evt) ? evt : (window.event) ? window.event : ""
var targElem = (evt.target) ? evt.target : evt.srcElement
if (targElem.className == "draggable") {
while (targElem.id != "myLayer" && targElem.parentNode) {
targElem = targElem.parentNode
}
if (engaged && targElem.id == "myLayer") {
engaged = false
}
}
}
Dragging a Layer
Drag me around the window.
document.onmousedown = engage
document.onmouseup = release
document.onmousemove = dragIt
document.onmouseout = release