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

home / experts / dhtml / column8

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

Comments

No browser detection is included. Explorer 4 Release 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() {
    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

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: 11/05/97
Revised: 11/13/97

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