DHTML Jigsaw Puzzle: NN4; The Complete Code (Drag SCRIPT)

The DHTML Lab Jigsaw Puzzle, Part III: NN4
SPECIAL EDITION; the director's cut 3/3

Comments

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.

The Puzzle Drag Script (puzzDrag.js)

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

All Rights Reserved. Legal Notices.
Created: Nov. 27, 1997
Revised: Jan. 18, 1998

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