DHTML Jigsaw Puzzle: IE4; The Complete Code (Drag SCRIPT) | 2 | WebReference

DHTML Jigsaw Puzzle: IE4; The Complete Code (Drag SCRIPT) | 2

Logo

The DHTML Lab Jigsaw Puzzle, Part II: IE4 cont'd
SPECIAL EDITION; the director's cut 3/3


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

The Puzzle Drag Script (puzzDrag.js)

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

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

URL: http://www.webreference.com/dhtml/column9/allCode3.html