DHTML Jigsaw Puzzle: Cross-Browser; The Complete Code (Drag SCRIPT)

The DHTML Lab Jigsaw Puzzle, Part IV: Cross-Browser
SPECIAL EDITION; the director's cut 3/3

Comments

The two external scripts can be downloaded as a zip file.

The Puzzle Drag Script (puzzDrag.js)

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 
    }
    else {
        whichEl.moveBy(distanceX,distanceY);
        if (whichEl.left + whichEl.clipLeft 
    }
    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 = allowTop && dropTop 
            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

All Rights Reserved. Legal Notices.
Created: Dec. 17, 1997
Revised: Jan. 18, 1998

URL: https://www.webreference.com/dhtml/column11/allCode3.html