DHTML Jigsaw Puzzle: IE4; Moving the Pieces | WebReference

DHTML Jigsaw Puzzle: IE4; Moving the Pieces


The DHTML Lab Jigsaw Puzzle, Part II: IE4 cont'd
moving the puzzle pieces

Moving the Puzzle or Puzzle Piece

The code for moving the puzzle pieces or full puzzle is our standard move function. We make one important modification, however. Since our puzzle piece may be small and a user may inadvertantly move it off the visible page completely by dragging it to the left and top, we insert a few lines of courtesy code. We will never allow a piece to leave the visible page. If it moves off, we bring it back in.

    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; }

You will recall that all draggable elements are given a clipLeft and clipTop property corresponding to their left and top clip values. Since the full puzzle is not clipped, elPuzzle has clipLeft and clipTop properties with a value of 0.

Let's take an example. We assume that we are moving a piece that is not the top-left piece of the puzzle. What the user sees as a piece is just the clipped part of a larger element containing the full image:

When we change the pixelLeft and pixelTop properties of the piece, we are changing the position of the full element. Let's say the user drags the piece to the left edge of the window. For the user the left position is 0, but in reality it is 0 minus the left clip, since the element origin is off the visible page. Using the clipLeft and clipTop properties, we can determine where the user thinks the piece is, that is, where the visible clipped piece is. To find, for instance the page position of the clipped piece, we add the element's pixelLeft value to its clipLeft value.

Take another look at the inserted code above. What we are saying here is: If the left position of the piece (whichEl.style.pixelLeft + whichEl.clipLeft) is less than the visible page left (document.body.scrollLeft), then keep the full element off-page just enough so that the piece is flush against the visible page left edge (whichEl.style.pixelLeft = document.body.scrollLeft - whichEl.clipLeft).

Return to the first page, if you like. Break up the puzzle and try to drag a piece off the visible page. Even the full puzzle cannot be moved off. It can, however, be scrolled off. If it is partly scrolled off, any attempt to play the puzzle will bring it back into full view. If you want to play the puzzle and keep it partly visible, then turn its draggability off with the toggle button off. This will change the draggable property value to false, so it will not have its page position checked.

Grabbing and moving the pieces was fairly straight-forward. What happens when the user releases the mouse button is a little more exciting.

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/puzzMove.html