| home / experts / dhtml / column11 |  
|
|
The two external scripts can be downloaded as a zip file.
currentX = currentY = 0;
whichEl = null;
function grabEl(e) {
if (IE4) {
whichEl = event.srcElement;
while (!whichEl.draggable) {
if (whichEl == elControls) {whichEl = null; return true};
whichEl = whichEl.parentElement;
if (whichEl == null) {return true}
}
}
else {
mouseX = e.pageX;
mouseY = e.pageY;
if (imageSelected) whichEl = elPuzzle;
if (isBroken) {
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 == null) {return true}
}
if (whichEl != elPuzzle && whichEl != activeEl) {
if (IE4) {whichEl.style.zIndex = activeEl.style.zIndex + 1}
else {whichEl.moveAbove(activeEl)};
activeEl = whichEl;
}
if (IE4) {
whichEl.style.pixelLeft = whichEl.offsetLeft;
whichEl.style.pixelTop = whichEl.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
}
else {
currentX = e.pageX;
currentY = e.pageY;
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = moveEl;
}
return false;
}
function moveEl(e) {
if (whichEl == null) {return true};
if (IE4) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
}
else {
newX = e.pageX;
newY = e.pageY;
}
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
if (IE4) {
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;
}
}
else {
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 checkEl() {
if (whichEl != null) {return false}
}
function dropEl(e) {
if (whichEl == null) {return true}
if (NS4) {document.releaseEvents(Event.MOUSEMOVE)}
if (whichEl == elPuzzle) { whichEl = null; return false}
if (IE4) {
dropLeft = event.clientX + document.body.scrollLeft;
dropTop = event.clientY + document.body.scrollTop;
}
else {
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) {
if (IE4) {
diffLeft = puzzLeft - whichEl.style.pixelLeft;
diffTop = puzzTop - whichEl.style.pixelTop;
}
else {
diffLeft = puzzLeft - whichEl.left;
diffTop = puzzTop - whichEl.top;
}
whereL = parseInt(diffLeft / pieceWidth) * pieceWidth;
if(isNaN(whereL)) {whereL = 0}
modL = parseInt(diffLeft % pieceWidth);
whereT = parseInt(diffTop / pieceHeight) * pieceHeight;
if(isNaN(whereT)) {whereT = 0}
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}
}
if (IE4) {
whichEl.style.pixelLeft = (puzzLeft - whereL);
whichEl.style.pixelTop = puzzTop - whereT;
}
else {
whichEl.left = (puzzLeft - whereL);
whichEl.top = (puzzTop - whereT);
}
putL = (NS4) ? whichEl.left : whichEl.style.pixelLeft;
putT = (NS4) ? whichEl.top : whichEl.style.pixelTop;
if (putL == puzzLeft && putT == puzzTop) {
tempEl = whichEl;
flashTimer = setInterval("visToggle(false)",100);
}
}
whichEl = null;
return false;
}
if (NS4) {
document.captureEvents(Event.MOUSEUP);
}
else {
document.onmousedown = grabEl;
document.onmousemove = moveEl;
document.onselectstart = checkEl;
}
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: Dec. 17, 1997
Revised: Jan. 18, 1998
URL: http://www.webreference.com/dhtml/column11/allCode3.html
