WebRef   Sitemap · Experts · Tools · Services · Newsletters · About

home / experts / dhtml / column10

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

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

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

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