| home / experts / dhtml / column10 |  
|
|
No browser detection is included. Navigator 4 is assumed. Browser detection will be added in the cross-browser version.
The two external scripts can be downloaded as a zip file.
currentX = currentY = 0;
whichEl = null;
function grabEl(e) {
mouseX = e.pageX;
mouseY = e.pageY;
for (i=0; i<document.layers.length; i++) {
tempLayer = document.layers[i];
if (!tempLayer.draggable) { continue }
if ( (mouseX > tempLayer.left+tempLayer.clip.left) &&
(mouseX < ((tempLayer.left+tempLayer.clip.left) + tempLayer.clip.width)) &&
(mouseY > tempLayer.top+tempLayer.clip.top) &&
(mouseY < ((tempLayer.top+tempLayer.clip.top)+ tempLayer.clip.height)) ) {
whichEl = tempLayer;
}
}
if (whichEl == elPuzzle && mouseY > elControls.pageY) { whichEl = null }
if (whichEl == null) { return true }
if (whichEl != elPuzzle && whichEl != activeEl) {
whichEl.moveAbove(activeEl);
activeEl = whichEl;
}
currentX = mouseX;
currentY = mouseY;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = moveEl;
return false;
}
function moveEl(e) {
newX = e.pageX;
newY = e.pageY;
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
whichEl.moveBy(distanceX,distanceY);
if (whichEl.left + whichEl.clipLeft < 0) {
whichEl.left = 0 - whichEl.clipLeft;
}
if (whichEl.top + whichEl.clipTop < 0) {
whichEl.top = 0 - whichEl.clipTop;
}
return false;
}
function dropEl(e) {
if (whichEl == null) { return true }
document.releaseEvents(Event.MOUSEMOVE);
if (whichEl == elPuzzle) { whichEl = null; return false }
dropLeft = e.pageX;
dropTop = e.pageY;
allowLeft = puzzLeft;
allowRight = puzzLeft + puzzWidth;
allowTop = puzzTop;
allowBot = puzzTop + puzzHeight;
if (dropLeft >= allowLeft && dropLeft <= allowRight &&
dropTop >= allowTop && dropTop <=allowBot) {
diffLeft = puzzLeft - whichEl.left;
diffTop = puzzTop - whichEl.top;
whereL = parseInt( diffLeft / pieceWidth ) * pieceWidth;
if(isNaN(whereL)) whereL = 0;
whereT = parseInt( diffTop / pieceHeight ) * pieceHeight;
if(isNaN(whereT)) whereT = 0;
modL = parseInt(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.left = (puzzLeft - whereL);
whichEl.top = (puzzTop - whereT);
if (whichEl.left == puzzLeft && whichEl.top == puzzTop) {
tempEl = whichEl;
flashTimer = setInterval("visToggle(false)",100);
}
}
whichEl = null;
return false;
}
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
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. 27, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column10/allCode3.html
