| home / experts / dhtml / column9 |  
|
|
The two external scripts can be downloaded as a zip file.
currentX = currentY = 0;
whichEl = null;
function grabEl() {
whichEl = event.srcElement;
while (!whichEl.draggable) {
whichEl = whichEl.parentElement;
if (whichEl == null) { return }
}
if ( whichEl != elPuzzle && whichEl != activeEl) {
whichEl.style.zIndex = activeEl.style.zIndex + 1;
activeEl = whichEl;
}
whichEl.style.pixelLeft = whichEl.offsetLeft;
whichEl.style.pixelTop = whichEl.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
}
function moveEl() {
if (whichEl == null) { return };
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
whichEl.style.pixelLeft += distanceX;
whichEl.style.pixelTop += distanceY;
if (whichEl.style.pixelLeft + whichEl.clipLeft < document.body.scrollLeft) {
whichEl.style.pixelLeft = document.body.scrollLeft - whichEl.clipLeft;
}
if (whichEl.style.pixelTop + whichEl.clipTop < document.body.scrollTop) {
whichEl.style.pixelTop = document.body.scrollTop - whichEl.clipTop;
}
event.returnValue = false;
}
function checkEl() {
if (whichEl != null) { return false }
}
function dropEl() {
if (whichEl == null){return}
if (whichEl == elPuzzle) {whichEl = null; return}
dropLeft = event.clientX + document.body.scrollLeft;
dropTop = event.clientY + document.body.scrollTop;
allowLeft = puzzLeft;
allowRight = puzzLeft + puzzWidth;
allowTop = puzzTop;
allowBot = puzzTop + puzzHeight;
if (dropLeft >= allowLeft && dropLeft <= allowRight &&
dropTop >= allowTop && dropTop <= allowBot) {
diffLeft = puzzLeft - whichEl.style.pixelLeft;
diffTop = puzzTop - whichEl.style.pixelTop;
whereL = parseInt( diffLeft / pieceWidth ) * pieceWidth;
whereT = parseInt( diffTop / pieceHeight ) * pieceHeight;
modL = diffLeft % pieceWidth;
modT = parseInt( diffTop % pieceHeight );
if (Math.abs(modL) > pieceWidth/2) {
if (modL>0) {whereL += pieceWidth} else {whereL -= pieceWidth}
}
if (Math.abs(modT) > pieceHeight/2) {
if (modT>0) {whereT += pieceHeight} else {whereT -= pieceHeight}
}
whichEl.style.pixelLeft = puzzLeft - whereL;
whichEl.style.pixelTop = puzzTop - whereT;
if (whichEl.style.pixelLeft == puzzLeft && whichEl.style.pixelTop == puzzTop) {
tempEl = whichEl;
flashTimer = setInterval("visToggle(false)",100);
}
}
whichEl = null;
}
document.onmousemove = moveEl;
document.onselectstart = checkEl;
document.onmousedown = grabEl;
document.onmouseup = dropEl;
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: Nov. 13, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column9/allCode3.html
