or jQuery vs ExtJs vs YUI vs Flex vs GWT

To leverage my programming skills in client side and to concurrently  compare modern UI frameworks and most importantly “just for fun” i start to implement 15 puzzles game

in:
1 jQuery;
2 Ext-Js;
3 Yahoo UI;
4 GWT;
5 Flex.

I have almost no experience working with this  frameworks, so it can be useful to discover, how simple and quick to start with, each of them is.

So, what exactly i want to implement? Really, no much:

puzzle must be dragged, not moved by click.

That’s all. No server side ). I will use the same (only colors is different) css for all of them. Although, application is not complex it will check  selectors, DOM manipulating and drag-n-drop  capabilities of those frameworks.

On finish i will compare:
– starting time,
– amount and simplicity of code,
– availability of examples, documentation, demos etc.,
– integration with some available IDE.

………………………………………..
Two week-ends later

jQuery.

demo download * view source code

jQuery — the best. API docs online coupled with examples. API itself is easy, natural, intuitive understandable and self described. Required javascript knowledge level to start with jQuery is very low. Starting time is very small. Highly recommended to all from novices to professionals. Only possible reason don’t to use it is probable lack of some widget/plugin that you need and can lucky found in ext-js or yui.

Ext-Js and YUI

YUI demo download * view source code

Ext – Js demo download * view source code

* jQuery, Ext-Js and YUI ways designed as Netbeans PHP projects. After downloading use “Import Project -> Netbeans project from zip” to import project to IDE.

Configure project properties to automatically copy  files to your apache server installation folder

I never used Netbeans for php projects with windows, but Netbeans has great tutorials about all and will be no problem,  i sure, to configure php project to copy files to proper place under apache server in windows too.

Ext-Js and YUI,  in my opinion, are in the same level if not the same. Ext-Js may be slightly better written, but YUI better documented. If i was required to choose between YUI and Ext-Js, YUI is better choice, because of better support, more demos and documentations. In other side, as you will see later YUI and Ext-Js are very similar, so YUI demos and examples sometimes can be useful for Ext-js writing.

Minimum size of required javascript files for such applications  for YUI is about 60 kB, for Ext-Js is 600 kB(!) (i use ext-all.js) and this is not so obvious how to decrease it.
For jQuery is 240 kB.

jQuery and YUI completely free, but Ext-Js has two license  and, if used for commercial non open source applications, must be paid on per developer basis.

Below comparison of some code excerpts in jQuery, Ext-Js and YUI.

Select by id:

jQuery

   var box = $('#box');

Ext-Js

 var box = Ext.get('box');
//seems to be simple but there is also Ext.select method
//who needs two methods that do almost the same?

Creating element:
jQuery

  $('#box').append(element);

Ext-Js

  $('#box').append(element);

Making draggable:
jQuery

  $('#puzzleId' + puzzle.number).draggable();

Making droppable:

  $('#freeSpaceId').droppable();

So, as possible to see, jQuery code is most short and understandable, the Ext-js and YUI code almost the same, except creating element in YUI, that is ugly. The Ext-js and YUI implementations have the same bug, that can be reproduced if user quickly move mouse and mouseup event occurs  outside of container.

I used Netbeans for all above implementations and I repeat again and again  that Netbeans is the best IDE for javascript development.

Flex

demo download view source code

There is still a question if it worth to compare Flex and GWT with above javascript libraries, but until they can be used for the same purpose i think this question is redundant.
Flex pros: — look and feel, that quiet hard to implement with CSS (rounded corners, gradient backgrounds)
– all in one workbench, very comfortable to code, deploy and debug,
– editor design mode allowing simply drag and drop component to container.

contras: — some css features hard (not obvious) to implement — for example: inset/outset borders.
– start time for average web developer is much bigger (java background can  be very helpful, because actionscript syntax,  i think, is simply dwarfish java),
– drag and drop API much more complex and confusable,
– need additional efforts to add Google Adds to application page ,
– API very big and unfamiliar and intuitively not understandable,
– compiler error messages is not informative at all,
– lack of java community (hard to find demos/examples/tutorials) or may be i don’t understand them? ,
– flex eclipse plugin for linux  doesn’t have design mode or doesn’t properly work,
– IDE is not free;

I used Flex Builder 3 as IDE and i  it was very comfortable to code, deploy and debug with some exceptions. For example class methods autocomplete window  contains  no information  what ancestor this method come from and no method description as well. I hope in Flash 4 it was improved.

– very big time (supposing learning java included) to novice to start work with,
– GWT designer plugin allowing visual editing is not free, though much cheaper than Flex Builder.

Summary

jQuery is the best choice for such applications. Easy to start, best documented and simply the best.

Ext-Js and YUI may be possible alternative/extension to jQuery if your application need some widgets that present in Ext-Js/YUI and not in jQuery.

Flex now is de facto UI standard for java (and not only java) enterprise applications. Look at image below.

5 500 (1298 job offers with title like Flex developer/programmer and 5446 with Flex in description) job offers compare to 600 for gwt/extjs/yui and to 3000 for jQuery. Your experience in Flex surely will be paid.

Flex application very easy can be made to look great. Very recommended for novices as way to programming world as well as for java professionals which are bored from server side programming ).

GWT is intended for java programmers, that want to write web applications in traditional swing non-markup way. BTW, rumors are in the air, that in GWT 2.0 (current version 1.7) mark up will be present. In all cases, in tomorrow Google Wave driven world, anyone (any web developer i mean) will have no choice ;0).

Next chart is very self explained.

The next chart confirm previous. Possible to see that in case if tendency will not changed,  during next (2010) year, jQuery will beat Flex and will become the most popular UI framework over the world.

Usage recommendations.

If you are web developer with some basic knowledge of html, css, javascript — go jQuery, don’t think twice.

If your application is build around some ExtJs/YUI widget(s) go them. Possible with jQuery.

If you completely novice to programming — go Flex — you will get the same starting point with more experienced programmers. One year of experience in your resume must be enough.
If  your customer (your own things view) needs Flex — go it, but remember that it was your own decision.

If you are java programmer — use GWT.
If you think that Google Wave can change the Web (read the World) — learn java (its cool!) and then use GWT.

PR: wait… I: wait… L: wait… LD: wait… I: wait… wait… Rank: wait… Traffic: wait… Price: wait… C: wait…

Related posts:

1. How to start desktop application with Netbeans
2. 15puzzles jQuery way
3. 15puzzles GWT way

Code does not contains auto generated by plugin and framework parts .
Files: index.mxml,
15puzzles.css,
FifteenPuzzles.as,
Puzzle.as,
FreeSpace.as
index.mxml file below is not completely displayed and also not formatted well. Please download whole project.

index.mxml

FifteenPuzzles.as

package includes {

	import flash.events.*;

	import mx.containers.Canvas;
	import mx.controls.Button;
	import mx.controls.Label;

	public class FifteenPuzzles {

		public var freeSpace : FreeSpace;
		public var lastDraggedPuzzle : Puzzle;
		public var puzzles : Array;
		public var dragDirection : String;
		public var box : Canvas;

		private static var fifteenPuzzles : FifteenPuzzles;

		public static function createInstance (box : Canvas) : FifteenPuzzles {
			if (fifteenPuzzles == null) {
				fifteenPuzzles = new FifteenPuzzles(box);
			}
			return fifteenPuzzles;
		}

		public static function getInstance () : FifteenPuzzles {
			return fifteenPuzzles;
		}

		public function FifteenPuzzles (box : Canvas) {
			this.box = box;
			init();
			makeDraggable();
		}

		private function init () : void {
			puzzles = new Array();
			var i : Number;
			for (i = 1 ; i <= 16 ; i++) {
				var x : int;
				if (i < 5) {
					x = (i - 1) * 50;
				} else if (5 <= i && i < 9) {
					x = (i - 5) * 50;
				} else if (9 <= i && i < 13) {
					x = (i - 9) * 50;
				} else if (13 <= i && i <= 16) {
					x = (i - 13) * 50;
				}
				var y : int;
				if (i < 5) {
					y = 0;
				} else if (5 <= i && i < 9) {
					y = 50;
				} else if (9 <= i && i < 13) {
					y = 100;
				} else if (13 <= i && i <= 16) {
					y = 150;
				}
				var puzzle : Puzzle;
				if (i == 16) {
					//freeSpace = new FreeSpace(x , y , i);
				} else {
					puzzle = new Puzzle(i , x , y , i);
				}
				if (i == 16) {
					appendFreeSpace(x , y , i);
				} else {
					appendPuzzle(puzzle);
				}
			}
		}

		public function makeDraggable () : void {
			for (var i : int = 1 ; i < 16 ; i++) {
				if (freeSpace.x == puzzles[i].x || freeSpace.y == puzzles[i].y) {
					if (puzzles[i].position == freeSpace.position - 1) {
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_DOWN , (Puzzle(puzzles[i])).onMouseDown);
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_UP , (Puzzle(puzzles[i])).onMouseUp);
					} else if (puzzles[i].position == freeSpace.position + 1) {
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_DOWN , (Puzzle(puzzles[i])).onMouseDown);
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_UP , (Puzzle(puzzles[i])).onMouseUp);
					} else if (puzzles[i].position == freeSpace.position + 4) {
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_DOWN , (Puzzle(puzzles[i])).onMouseDown);
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_UP , (Puzzle(puzzles[i])).onMouseUp);
					} else if (puzzles[i].position == freeSpace.position - 4) {
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_DOWN , (Puzzle(puzzles[i])).onMouseDown);
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_UP , (Puzzle(puzzles[i])).onMouseUp);
					}
				}
			}
		}

		public function appendPuzzle (puzzle : Puzzle) : void {
			puzzles[puzzle.number] = puzzle;
			puzzle.id = 'puzzle' + puzzle.number;
			//puzzle.setStyle('position' , 'absolute');
			puzzle.styleName = 'puzzle';
			var label : Label = new Label();
			label.text = "" + puzzle.number;
			puzzle.addChild(label);
			box.addChild(puzzle);
		}

		public function appendFreeSpace (x : int , y : int , position : int) : void {
			freeSpace = new FreeSpace(x , y , position);
			freeSpace.id = 'freeSpace';
			freeSpace.setStyle('position' , 'absolute');
			freeSpace.styleName = 'freeSpace';
			var label : Label = new Label();
			//freeSpace.addChild(label);

			freeSpace.addChild(label);
			box.addChild(freeSpace);

			//box.setChildIndex(freeSpace, 100); 

			var z : int = box.getChildIndex(freeSpace);

		}

		public function scramble15puzzles () : void {
			while (box.numChildren > 0) {
				box.removeChildAt(0);
			}
			var xTemp : int = freeSpace.x;
			var yTemp : int = freeSpace.y;
			var positionTemp : int = freeSpace.position;

			var n : int = Math.ceil(Math.random() * 15);
			var randomPuzzle : Puzzle = puzzles[n];
			freeSpace.x = randomPuzzle.x;
			freeSpace.y = randomPuzzle.y;
			freeSpace.position = randomPuzzle.position;

			randomPuzzle.x = xTemp;
			randomPuzzle.y = yTemp;
			randomPuzzle.position = positionTemp;

			appendFreeSpace(freeSpace.x , freeSpace.y , freeSpace.position);

			for (var i : int = 0 ; i < 20 ; i++) {
				var randomPuzzle1 : Puzzle = puzzles[Math.ceil(Math.random() * 15)];
				var randomPuzzle2 : Puzzle = puzzles[Math.ceil(Math.random() * 15)];
				xTemp = randomPuzzle1.x;
				yTemp = randomPuzzle1.y;
				positionTemp = randomPuzzle1.position;

				randomPuzzle1.x = randomPuzzle2.x;
				randomPuzzle1.y = randomPuzzle2.y;
				randomPuzzle1.position = randomPuzzle2.position;

				randomPuzzle2.x = xTemp;
				randomPuzzle2.y = yTemp;
				randomPuzzle2.position = positionTemp;
			}

			for (i = 1 ; i < 16 ; i++) {
				appendPuzzle(puzzles[i]);
			}
			this.makeDraggable();
		}

		public function sort15puzzles () : void {
			while (box.numChildren > 0) {
				box.removeChildAt(0);
			}
			init();
			makeDraggable();
		}

	}
}

Puzzle.as

package includes {
	import flash.events.*;
	import flash.geom.Rectangle;

	import mx.containers.Canvas;

	public class Puzzle extends Canvas {

		public function Puzzle (number : int , x : int , y : int , position : int) {
			this.number = number;
			this.x = x;
			this.y = y;
			this.position = position;
			this.explicitWidth = 50;
			this.explicitHeight = 50;
			this.fifteenPuzzles = FifteenPuzzles.getInstance();
			//addEventListener(MouseEvent.MOUSE_DOWN , onMouseDown);
			//addEventListener(MouseEvent.MOUSE_UP , onMouseUp);
		}
		public var number : int;
		public var position : int;
		public var fifteenPuzzles : FifteenPuzzles;

		public var alreadyDragged : Boolean;
		public var lastDraggedPuzzleNormalX : int;
		public var lastDraggedPuzzleNormalY : int;

		//public var x:int;
		//public var y:int;

		public function onMouseDown (event : Event) : void {
			if (fifteenPuzzles == null) {
				fifteenPuzzles = FifteenPuzzles.getInstance();
			}
			this.parent.setChildIndex(fifteenPuzzles.freeSpace , 0);

			if (fifteenPuzzles.freeSpace.x == x || fifteenPuzzles.freeSpace.y == y) {
				if (position == fifteenPuzzles.freeSpace.position - 1) {
					markLastDraggedPuzzle();
					this.startDrag(false , new Rectangle(lastDraggedPuzzleNormalX , lastDraggedPuzzleNormalY , 50 , 0));
					fifteenPuzzles.dragDirection = 'right';
				} else if (position == fifteenPuzzles.freeSpace.position + 1) {
					markLastDraggedPuzzle();
					this.startDrag(false , new Rectangle(lastDraggedPuzzleNormalX - 50 , lastDraggedPuzzleNormalY , 50 , 0));
					fifteenPuzzles.dragDirection = 'left';
				} else if (position == fifteenPuzzles.freeSpace.position + 4) {
					markLastDraggedPuzzle();
					this.startDrag(false , new Rectangle(lastDraggedPuzzleNormalX , lastDraggedPuzzleNormalY - 50 , 0 , 50));
					fifteenPuzzles.dragDirection = 'up';
				} else if (position == fifteenPuzzles.freeSpace.position - 4) {
					markLastDraggedPuzzle();
					this.startDrag(false , new Rectangle(lastDraggedPuzzleNormalX , lastDraggedPuzzleNormalY , 0 , 50));
					fifteenPuzzles.dragDirection = 'down';
				}
			}
			//this.startDrag();
		}

		private function markLastDraggedPuzzle () {
			if (!alreadyDragged) {
				lastDraggedPuzzleNormalX = this.x;
				lastDraggedPuzzleNormalY = this.y;
				alreadyDragged = true;
			}
			fifteenPuzzles.lastDraggedPuzzle = new Puzzle(this.number , lastDraggedPuzzleNormalX , lastDraggedPuzzleNormalY , this.position);
		}

		public function onMouseUp (event : MouseEvent) : void {
			this.stopDrag();
			if (fifteenPuzzles.dragDirection == 'right' && this.x > fifteenPuzzles.freeSpace.x - 20) {
				drop();
			} else if (fifteenPuzzles.dragDirection == 'left' && this.x < fifteenPuzzles.freeSpace.x + 20) {
				drop();
			} else if (fifteenPuzzles.dragDirection == 'up' && this.y < fifteenPuzzles.freeSpace.y + 20) {
				drop();
			} else if (fifteenPuzzles.dragDirection == 'down' && this.y > fifteenPuzzles.freeSpace.y - 20) {
				drop();
			}

		}

		private function drop () : void {
			alreadyDragged = false;
			this.parent.removeChild(fifteenPuzzles.freeSpace);
			var xTemp : int = fifteenPuzzles.freeSpace.x;
			var yTemp : int = fifteenPuzzles.freeSpace.y;
			var positionTemp : int = fifteenPuzzles.freeSpace.position;

			fifteenPuzzles.freeSpace.x = fifteenPuzzles.lastDraggedPuzzle.x;
			fifteenPuzzles.freeSpace.y = fifteenPuzzles.lastDraggedPuzzle.y;
			fifteenPuzzles.freeSpace.position = fifteenPuzzles.lastDraggedPuzzle.position;

			fifteenPuzzles.lastDraggedPuzzle.x = xTemp;
			fifteenPuzzles.lastDraggedPuzzle.y = yTemp;
			fifteenPuzzles.lastDraggedPuzzle.position = positionTemp;

			fifteenPuzzles.puzzles[fifteenPuzzles.lastDraggedPuzzle.number] = fifteenPuzzles.lastDraggedPuzzle;
			//destroy all draggable and dropable

			fifteenPuzzles.appendFreeSpace(fifteenPuzzles.freeSpace.x , fifteenPuzzles.freeSpace.y , fifteenPuzzles.freeSpace.position);

			this.parent.removeChild(this);

			var newPuzzle = new Puzzle(fifteenPuzzles.lastDraggedPuzzle.number , xTemp , yTemp , positionTemp);
			fifteenPuzzles.appendPuzzle(newPuzzle);
			fifteenPuzzles.makeDraggable();
		}
	}
}

FreeSpace.as

package includes {

	import mx.containers.Canvas;
	import mx.controls.Label;

	public class FreeSpace extends Canvas {
		public var position : int;

		public function FreeSpace (x : int , y : int , position : int) {
			this.x = x;
			this.y = y;
			this.position = position;
			this.explicitWidth = 50;
			this.explicitHeight = 50;
		}

	}
}

15puzzles.css

/* CSS file */

.box{

    width: 208px;
    height: 208px;
    position: absolute;
    top: 92px;
    left: 92px;
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
    border-top-style: double;
    border-right-width: 8px;
    border-left-width: 8px;
    border-bottom-width: 8px;
    border-top-width: 8px;
    border-right-color: #e08b10;
    border-left-color: #e08b10;
    border-bottom-color: #e08b10;
    border-top-color: #e08b10;
    background-color: #B964D2;
    visibility: visible;
	borderStyle: solid;
	borderColor: #46284F;
	borderThickness: 4;
	cornerRadius: 10;
	backgroundAlpha: 0.74;
}

.puzzle{

    position: absolute;
    width: 42px;
    height: 42px;
    visibility: visible;
    border-top-style: outset;
    border-bottom-style: outset;
    border-right-color: #d41212;
    border-left-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    border-right-width: 4px;
    border-left-width: 4px;
    border-bottom-width: 4px;
    border-top-width: 4px;
    border-left-style: outset;
    border-right-style: outset;
    background-color: #191717;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #C7A7D5;
    text-align: center;
    vertical-align: bottom;
    line-height: 43px;
	borderStyle: solid;
	borderColor: #943A8A;
	borderThickness: 4;
	backgroundAlpha: 0.9;
	backgroundSize: auto;
	cornerRadius: 7;
	themeColor: #C000FF;
}

.freeSpace{

    width: 100px;
    height: 100px;
    visibility: visible;

    background-color: #B964D2;
	borderColor: #9AA5D2;
	borderStyle: none;
	borderThickness: 3;

}

.buttons{

    position: absolute;
    top: 100px;
    left: 350px;
    width: 100px;
    height: 300px;
}

.button{

    border-right-style: outset;
    border-left-style: outset;
    border-bottom-style: outset;
    border-top-style: outset;
    border-right-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    background-color: #ee1515;
    width: 100px;
    height: 30px;
    vertical-align: bottom;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #fce5c7;
    font-weight: bold;
     border-left-color: #d41212;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    text-indent: 1px;

    line-height: 30px;
	themeColor: #9656B1;
	borderColor: #5F467A;
	fillAlphas: 1.0, 1.0;
	fillColors: #C99BCE, #4D0B55, #9739BE, #5C1E62;
	textRollOverColor: #E0D0E1;
}

.button-clicked{

    border-right-style: inset;
    border-left-style: inset;
    border-bottom-style: inset;
    border-top-style: inset;
    border-right-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    background-color: #ee1515;
    width: 100px;
    height: 30px;
    vertical-align: middle;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    color: #fce5c7;
    font-weight: bold;
     border-left-color: #d41212;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    position: absolute;
    line-height: 30px;
}
global
{
	backgroundGradientAlphas: 1.0, 1.0;
	backgroundGradientColors: #8253A6, #BFA2D6;
	borderColor: #AF8BD7;
	color: #C393CD;
	fontSize: 23;
	disabledColor: #D4C1DE;
	paddingLeft: 0;
	paddingTop: 0;
	paddingRight: 0;
	paddingBottom: 0;
}

Related posts:

1. 15puzzles GWT way
2. 15puzzles jQuery way
3. 15puzzles ExtJs way

Code does not contains auto generated by plugin and framework parts .
Files: index.html,
gwt15puzzles.css,
gwt15puzzles.java,
FifteenPuzzles.java,
Puzzle.java,
FreeSpace.java
Html code below is not completely displayed and also not formatted well. Please download whole project.

index.html

    
        
        


        
    
    

        

            Blog
            View Source
            Download
        


            Ext-Js way
            
            Yahoo UI way
            
            Flex way
            
            jQuery way
        

    

gwt15puzzles.css

.page{

	color: #000000;
	margin: 0px;
	padding: 0px;
	font-family: fantasy;
	font-size: 24px;
	font-weight: bold;
	background-color: Silver;
}

.title{
    position: absolute;
	color: #000000;
	font-family: fantasy;
	font-size: 18px;
}

.box{

    width: 200px;
    height: 200px;
    position: absolute;
    top: 92px;
    left: 92px;
    /*z-index:-2;*/

    visibility: visible;
    display: block;

	border-top: 8px double Black;
	border-right: 8px double black;
	border-bottom: 8px double Black;
	border-left: 8px double Black;
	background-color: Gray;
}

.puzzle{

    position: absolute;
    width: 42px;
    height: 42px;
    visibility: visible;
    z-index: 2;
	color: Black;
	border: 4px outset orange;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	line-height: 43px;
	text-align: center;
	vertical-align: middle;
	background-color: Yellow;
}

.freeSpace{

    width: 48px;
    height: 48px;
    visibility: visible;
	border: 1px dotted yellow;
	background-color: Gray;
}

.buttons{

    position: absolute;
    top: 100px;
    left: 350px;
    width: 100px;
    height: 300px;
}

.button{

    width: 100px;
    height: 30px;

	color: Black;
	margin: 30px;
	border: 5px outset #ffcc66;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
	text-indent: 1px;
	vertical-align: bottom;
	background-color: #ffff66;
}

.button-clicked{

    width: 100px;
    height: 30px;
	color: dimgray;
	margin: 30px;
	border: 5px inset #8c4e9b;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
	text-indent: 1px;
	vertical-align: bottom;
	background-color: #ccff33;
}

.gwt-iframe{

    top: 0px;
    left: 0px;
    width: 600px;
    height: 500px;
    visibility: visible;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    border-top-style: none;
    border-right-color: silver;
    border-left-color: silver;
    border-bottom-color: silver;
    border-top-color: silver;
}

.header-menu{

    position: absolute;
    top: 0px;
    left: 500px;
    width: 500px;
    height: 50px;
    visibility: visible;
}

.header-link{

    font-style: normal;
    font-family: fantasy;
    font-size: 18px;
    color: #000000;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.ads{

    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    border-top-style: none;
    border-right-color: #e08989;
    border-left-color: #e08989;
    border-bottom-color: #e08989;
    border-top-color: #e08989;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    position: absolute;
    top: 92px;
    left: 550px;
    width: 300px;
    height: 350px;
    visibility: visible;
}

.others-ways{

    position: absolute;
    top: 92px;
    left: 860px;
    color: #000000;
}

.other-way-link{

    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #000000;
    line-height: 40px;
}

gwt15puzzles.java

package com.javaghost.gwt15puzzles.client;

import com.google.gwt.core.client.EntryPoint;

/**
 * Entry point classes define onModuleLoad().
 */
public class gwt15puzzles implements EntryPoint {

	FifteenPuzzles fifteenPuzzles;

	public void onModuleLoad() {
		RootPanel rootPanel = RootPanel.get();
		rootPanel.setStyleName("page");
		{
			Box box = new Box();
			box.setStyleName("box");
			rootPanel.add(box);
			box.setSize("200", "200");
			fifteenPuzzles = FifteenPuzzles.createInstance(box);
			fifteenPuzzles.init();
			fifteenPuzzles.makeDraggable();
			AbsolutePanel buttonsPanel = new AbsolutePanel();
			buttonsPanel.setStyleName("buttons");
			rootPanel.add(buttonsPanel, 357, 97);
			buttonsPanel.setSize("134px", "300px");
			Button scrableButton = new Button("Scramble");
			buttonsPanel.add(scrableButton, -12, 5);
			scrableButton.setSize("100px", "30px");
			scrableButton.setStyleName("button");
			Button sortButton = new Button("Sort");
			buttonsPanel.add(sortButton, -12, 83);
			sortButton.setSize("100px", "30px");
			sortButton.setStyleName("button");

			Label label = new Label("15puzzles GWT way");
			label.setStyleName("title");
			rootPanel.add(label, 92, 26);
			scrableButton.addClickHandler(new ClickHandler() {
				public void onClick(ClickEvent event) {
					fifteenPuzzles.scramble15puzzles();
				}
			});
			sortButton.addClickHandler(new ClickHandler() {
				public void onClick(ClickEvent event) {
					fifteenPuzzles.sort15puzzles();
				}
			});
		}
	}
}

FifteenPuzzles.java

package com.javaghost.gwt15puzzles.client;

import com.google.gwt.user.client.ui.Label;
import com.javaghost.gwt15puzzles.client.Puzzle.DragDirection;

public class FifteenPuzzles {

	public FreeSpace freeSpace;
	public Puzzle lastDraggedPuzzle;
	public Puzzle[] puzzles;
	public String dragDirection;
	public Box box;

	private static FifteenPuzzles fifteenPuzzles;

	public static FifteenPuzzles createInstance(Box box) {
		if (fifteenPuzzles == null) {
			fifteenPuzzles = new FifteenPuzzles(box);
		}
		return fifteenPuzzles;
	}

	public static FifteenPuzzles getInstance() {
		return fifteenPuzzles;
	}

	public FifteenPuzzles(Box box) {
		this.box = box;
	}

	public void init() {
		puzzles = new Puzzle[16];

		for (int i = 1; i <= 16; i++) {
			int x = 0;
			if (i < 5) {
				x = (i - 1) * 50;
			} else if (5 <= i && i < 9) {
				x = (i - 5) * 50;
			} else if (9 <= i && i < 13) {
				x = (i - 9) * 50;
			} else if (13 <= i && i <= 16) {
				x = (i - 13) * 50;
			}
			int y = 0;
			if (i < 5) {
				y = 0;
			} else if (5 <= i && i < 9) {
				y = 50;
			} else if (9 <= i && i < 13) {
				y = 100;
			} else if (13 <= i && i <= 16) {
				y = 150;
			}
			Puzzle puzzle = null;
			if (i == 16) {
				// freeSpace = new FreeSpace(x , y , i);
			} else {
				puzzle = new Puzzle(i, x, y, i);
			}
			if (i == 16) {
				appendFreeSpace(x, y, i);
			} else {
				appendPuzzle(puzzle);
			}
		}
	}

	public void makeDraggable() {
		for (int i = 1; i < 16; i++) {
			if (freeSpace.x == puzzles[i].x || freeSpace.y == puzzles[i].y) {
				if (puzzles[i].position == freeSpace.position - 1) {
					puzzles[i].makeDraggable(DragDirection.RIGHT);
				} else if (puzzles[i].position == freeSpace.position + 1) {
					puzzles[i].makeDraggable(DragDirection.LEFT);
				} else if (puzzles[i].position == freeSpace.position + 4) {
					puzzles[i].makeDraggable(DragDirection.UP);
				} else if (puzzles[i].position == freeSpace.position - 4) {
					puzzles[i].makeDraggable(DragDirection.DOWN);
				}
			}
		}
	}

	public void appendPuzzle(Puzzle puzzle) {
		puzzles[puzzle.number] = puzzle;
		puzzle.setStyleName("puzzle");
		Label label = new Label(puzzle.number + "");
		puzzle.add(label);
		box.add(puzzle, puzzle.x, puzzle.y);
	}

	public void appendFreeSpace(int x, int y, int position) {
		freeSpace = new FreeSpace(x, y, position);
		freeSpace.setStyleName("freeSpace");
		box.add(freeSpace, freeSpace.x, freeSpace.y);
	}

	public void scramble15puzzles() {
		while (box.getChildren().size() > 0) {
			box.remove(0);
		}
		int xTemp = freeSpace.x;
		int yTemp = freeSpace.y;
		int positionTemp = freeSpace.position;

		int n = (int) Math.ceil(Math.random() * 15);
		Puzzle randomPuzzle = puzzles[n];
		freeSpace.x = randomPuzzle.x;
		freeSpace.y = randomPuzzle.y;
		freeSpace.position = randomPuzzle.position;

		randomPuzzle.x = xTemp;
		randomPuzzle.y = yTemp;
		randomPuzzle.position = positionTemp;

		appendFreeSpace(freeSpace.x, freeSpace.y, freeSpace.position);

		for (int i = 0; i < 20; i++) {
			Puzzle randomPuzzle1 = puzzles[(int) Math.ceil(Math.random() * 15)];
			Puzzle randomPuzzle2 = puzzles[(int) Math.ceil(Math.random() * 15)];
			xTemp = randomPuzzle1.x;
			yTemp = randomPuzzle1.y;
			positionTemp = randomPuzzle1.position;

			randomPuzzle1.x = randomPuzzle2.x;
			randomPuzzle1.y = randomPuzzle2.y;
			randomPuzzle1.position = randomPuzzle2.position;

			randomPuzzle2.x = xTemp;
			randomPuzzle2.y = yTemp;
			randomPuzzle2.position = positionTemp;
		}

		for (int i = 1; i < 16; i++) {
			appendPuzzle(puzzles[i]);
		}
		this.makeDraggable();
	}

	public void sort15puzzles() {
		while (box.getChildren().size() > 0) {
			box.remove(0);
		}
		init();
		makeDraggable();
	}

}

Puzzle.java

package com.javaghost.gwt15puzzles.client;

import com.google.gwt.user.client.DOM;

@SuppressWarnings("deprecation")
public class Puzzle extends AbsolutePanel implements SourcesMouseEvents, EventPreview {

	private FifteenPuzzles fifteenPuzzles;

	public int number;
	public int position;
	public int x; // left
	public int y; // top

	private DragDirection dragDirection;
	private int normalPositionX;
	private int normalPositionY;

	public boolean alreadyDragged;
	public int lastDraggedPuzzleNormalX;
	public int lastDraggedPuzzleNormalY;

	private MouseListenerCollection mouseListeners = new MouseListenerCollection();

	public Puzzle(int number, int x, int y, int position) {
		fifteenPuzzles = FifteenPuzzles.getInstance();
		this.x = x;
		this.y = y;
		this.position = position;
		this.number = number;
		DOM.sinkEvents(getElement(), DOM.getEventsSunk(getElement())
				| Event.MOUSEEVENTS);
		DOM.addEventPreview(this);
		addMouseListener(new DraggableMouseListener());
	}

	public void makeDraggable(DragDirection dragDirection) {
		this.dragDirection = dragDirection;
		normalPositionX = x;
		normalPositionY = y;
	}

	public void addMouseListener(MouseListener l) {
		mouseListeners.add(l);
	}

	public void removeMouseListener(MouseListener l) {
		mouseListeners.remove(l);
	}

	public void onBrowserEvent(Event event) {
		switch (DOM.eventGetType(event)) {
		case Event.ONMOUSEDOWN:
		case Event.ONMOUSEUP:
		case Event.ONMOUSEMOVE:
		//case Event.ONMOUSEOVER:
		case Event.ONMOUSEOUT:
			mouseListeners.fireMouseEvent(this, event);
			break;
		}
	}

	public boolean onEventPreview(Event event) {
	    if (DOM.eventGetType(event) == Event.ONMOUSEDOWN &&
	        DOM.isOrHasChild(getElement(), DOM.eventGetCurrentTarget(event))) {
	      DOM.eventPreventDefault(event);
	    }
	    // Always returning true as we don't want to cancel
	    // the event, just to prevent the default behaviour.
	    return true;
	}

	private class DraggableMouseListener extends MouseListenerAdapter {

		private boolean dragging = false;
		private int dragStartX;
		private int dragStartY;

		public void onMouseDown(Widget sender, int x, int y) {

			if (dragDirection == null){
				return;
			}
			dragging = true;

			// capturing the mouse to the dragged widget.
			DOM.setCapture(getElement());
			dragStartX = x;
			dragStartY = y;
			markLastDraggedPuzzle();
		}

		private void markLastDraggedPuzzle () {
			if (!alreadyDragged) {
				lastDraggedPuzzleNormalX = Puzzle.this.x;
				lastDraggedPuzzleNormalY = Puzzle.this.y;
				alreadyDragged = true;
			}
			fifteenPuzzles.lastDraggedPuzzle = new Puzzle(Puzzle.this.number , lastDraggedPuzzleNormalX , lastDraggedPuzzleNormalY , Puzzle.this.position);
		}

		public void onMouseUp(Widget sender, int x, int y) {
			dragging = false;
			DOM.releaseCapture(getElement());
			if (dragDirection == DragDirection.RIGHT && x > fifteenPuzzles.freeSpace.x - 20) {
				drop();
			} else if (dragDirection == DragDirection.LEFT && x < fifteenPuzzles.freeSpace.x + 20) {
				drop();
			} else if (dragDirection == DragDirection.UP && y < fifteenPuzzles.freeSpace.y + 20) {
				drop();
			} else if (dragDirection == DragDirection.DOWN && y > fifteenPuzzles.freeSpace.y - 20) {
				drop();
			}
		}

		public void onMouseMove(Widget sender, int x, int y) {
			int newX = normalPositionX;
			int newY = normalPositionY;

			if (dragging) {
				// we don't want the widget to go off-screen, so the top/left
				// values should always remain be positive.
				if (dragDirection == DragDirection.RIGHT) {
					if (x >= normalPositionX && x <= normalPositionX + 50 ){
						newX = x;
					} else if (x > normalPositionX + 50) {
						newX = normalPositionX + 50;
					}
					//newX = Math.max(0, x + getAbsoluteLeft() - dragStartX);
				} else if (dragDirection == DragDirection.LEFT) {
					if (x >= normalPositionX - 50 && x <= normalPositionX ){
						newX = x;
					} else if (x < normalPositionX - 50) {
						newX = normalPositionX - 50;
					}
					//newX = Math.max(0, x + getAbsoluteLeft() - dragStartX);
				} else if (dragDirection == DragDirection.UP) {
					if (y >= normalPositionY - 50 && y <= normalPositionY ){
						newY = y;
					} else if (y < normalPositionY - 50) {
						newY = normalPositionY;
					}
					//newY = Math.max(0, y + getAbsoluteTop() - dragStartY);
				} else if (dragDirection == DragDirection.DOWN) {
					if (y >= normalPositionY && y <= normalPositionY + 50){
						newY = y;
					} else if (y > normalPositionY + 50) {
						newY = normalPositionY + 50;
					}
					//newY = Math.max(0, y + getAbsoluteTop() - dragStartY);
				}

				DOM.setStyleAttribute(getElement(), "left", newX + "");
				DOM.setStyleAttribute(getElement(), "top", newY + "");
			}
		}
	}

	public void drop(){
		alreadyDragged = false;
		fifteenPuzzles.box.remove(fifteenPuzzles.freeSpace);
		int xTemp = fifteenPuzzles.freeSpace.x;
		int yTemp = fifteenPuzzles.freeSpace.y;
		int positionTemp = fifteenPuzzles.freeSpace.position;

		fifteenPuzzles.freeSpace.x = fifteenPuzzles.lastDraggedPuzzle.x;
		fifteenPuzzles.freeSpace.y = fifteenPuzzles.lastDraggedPuzzle.y;
		fifteenPuzzles.freeSpace.position = fifteenPuzzles.lastDraggedPuzzle.position;

		fifteenPuzzles.lastDraggedPuzzle.x = xTemp;
		fifteenPuzzles.lastDraggedPuzzle.y = yTemp;
		fifteenPuzzles.lastDraggedPuzzle.position = positionTemp;

		fifteenPuzzles.puzzles[fifteenPuzzles.lastDraggedPuzzle.number] = fifteenPuzzles.lastDraggedPuzzle;
		//destroy all draggable and dropable

		fifteenPuzzles.appendFreeSpace(fifteenPuzzles.freeSpace.x , fifteenPuzzles.freeSpace.y , fifteenPuzzles.freeSpace.position);

		fifteenPuzzles.box.remove(this);

		Puzzle newPuzzle = new Puzzle(fifteenPuzzles.lastDraggedPuzzle.number , xTemp , yTemp , positionTemp);
		fifteenPuzzles.appendPuzzle(newPuzzle);
		fifteenPuzzles.makeDraggable();
	}

	public enum DragDirection {
		LEFT, RIGHT, UP, DOWN;
	}

}

FreeSpace.java

package com.javaghost.gwt15puzzles.client;

import com.google.gwt.user.client.ui.AbsolutePanel;

public class FreeSpace extends AbsolutePanel {

	public int position;
	public int x; // left
	public int y; // top

	public FreeSpace(int x, int y, int position) {
		this.x = x;
		this.y = y;
		this.position = position;

	}
}

Related posts:

1. 15puzzles Flex way
2. 15puzzles ExtJs way
3. 15puzzles jQuery way

The purpose of this explanation is only to shift down code, because of beginning of code is not displayed.

So it will be clever do not to read it at all.

But in all cases implementation consists of index.html, 15puzzles.css and 15puzzles.js.

index.html contains all page mark up.

15puzzles.css contains css rules.

And 15puzzles.js contains all game logic and implementation.

Its also does not help. I need to do something with code highlighting plugin. Html code below is not completely displayed and also not formatted well. Please download whole project.

index.html

    
        
        

        
        
        
        
        

    
    

15puzzles YUI way



Scramble
Sort


            Blog
            View Source
            Download
        


            jQuery way
            
            Ext-Js way
            
            Flex way
            
            Google Web Toolkit way
        

    

15puzzles.css

/*
    Document   : 15puzzle
    Created on : Oct 14, 2009, 5:52:32 PM
    Author     : yuri
    Description:
        Purpose of the stylesheet follows.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root {
    display: block;
}

body{

    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    background-color: #f1e2ef;
    color: #784280;
    font-weight: bold;
    font-size: 18px;
    font-family: fantasy;
}

.title{
    position: absolute;
    left:92px;
    top: 2px;
}

.box{

    width: 200px;
    height: 200px;
    position: absolute;
    top: 92px;
    left: 92px;
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
    border-top-style: double;
    border-right-width: 8px;
    border-left-width: 8px;
    border-bottom-width: 8px;
    border-top-width: 8px;
    border-right-color: #26244e;
    border-left-color: #26244e;
    border-bottom-color: #26244e;
    border-top-color: #26244e;
    z-index:-2;

    background-color: #aa97e3;
    visibility: visible;
}

.puzzle{

    position: absolute;
    width: 42px;
    height: 42px;
    visibility: visible;
    z-index: 2;
    border-top-style: outset;
    border-bottom-style: outset;
    border-right-color: #8d41a2;
    border-left-color: #8d41a2;
    border-bottom-color: #8d41a2;
    border-top-color: #8d41a2;
    border-right-width: 4px;
    border-left-width: 4px;
    border-bottom-width: 4px;
    border-top-width: 4px;
    border-left-style: outset;
    border-right-style: outset;
    background-color: #9229ab;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #e9d5ef;
    text-align: center;
    vertical-align: middle;
    line-height: 43px;
}

.freeSpace{

    width: 48px;
    height: 48px;
    visibility: visible;
    z-index: -1;
    border-right-style: dotted;
    border-left-style: dotted;
    border-bottom-style: dotted;
    border-top-style: dotted;
    border-right-color: #f894de;
    border-left-color: #f894de;
    border-bottom-color: #f894de;
    border-top-color: #f894de;
    background-color: #7827ce;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
}

.buttons{

    position: absolute;
    top: 100px;
    left: 350px;
    width: 100px;
    height: 300px;
}

.button{

    border-right-style: outset;
    border-left-style: outset;
    border-bottom-style: outset;
    border-top-style: outset;
    border-right-color: #8c4e9b;
    border-bottom-color: #8c4e9b;
    border-top-color: #8c4e9b;
    background-color: #9242a8;
    width: 100px;
    height: 30px;
    vertical-align: bottom;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #dfc3e8;
    font-weight: bold;
     border-left-color: #8c4e9b;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    text-indent: 1px;

    line-height: 30px;
}

.button-clicked{

   border-right-style: inset;
    border-left-style: inset;
    border-bottom-style: inset;
    border-top-style: inset;
    border-right-color: #8c4e9b;
    border-bottom-color: #8c4e9b;
    border-top-color: #8c4e9b;
    background-color: #9242a8;
    width: 100px;
    height: 30px;
    vertical-align: bottom;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #dfc3e8;
    font-weight: bold;
     border-left-color: #8c4e9b;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    text-indent: 1px;

    line-height: 30px;
}

.header-menu{

    position: absolute;
    top: 0px;
    left: 500px;
    width: 500px;
    height: 50px;
    visibility: visible;
}

.header-link{

    font-style: normal;
    font-family: fantasy;
    font-size: 18px;
    color: #784280;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.ads{

    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    border-top-style: none;
    border-right-color: #e08989;
    border-left-color: #e08989;
    border-bottom-color: #e08989;
    border-top-color: #e08989;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    position: absolute;
    top: 92px;
    left: 500px;
    width: 300px;
    height: 350px;
    visibility: visible;
}

.others-ways{

    position: absolute;
    top: 92px;
    left: 810px;
    color: #784280;
}

.other-way-link{

    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #784280;
    line-height: 40px;
}

15puzzles.js

var puzzles;
var lastDraggedPuzzle;
var freeSpace;

function FifteenPuzzles(){
    puzzles = new Array();
    this.init = init;
    this.makeDraggable = makeDraggable;
    this.makeDroppable = makeDroppable;
    this.scramble = scramble;
    this.sort = sort;
}

function Puzzle(number, x, y, isDraggable, position){
    this.number = number;
    this.x = x;
    this.y = y;
    this.isDraggable = isDraggable;
    this.position = position;

}

function FreeSpace(x, y, position){
    this.x = x;
    this.y = y;
    this.position = position;
}

function init(){
    for (var i = 1; i <= 16; i++){
        var box_x = 0;
        var x;
        if (i < 5){
            x = box_x + (i - 1) * 50;
        } else if (5 <= i && i < 9){
            x = box_x + (i - 5) * 50;
        } else if (9 <= i  && i < 13){
            x = box_x + (i - 9) * 50;
        } else if (13 <= i  && i <= 16){
            x = box_x + (i - 13) * 50;
        }
        var box_y = 0;
        var y;
        if (i < 5){
            y = box_y;
        } else if (5 <= i  && i < 9){
            y = box_y + 50;
        } else if (9 <= i  && i < 13){
            y = box_y + 100;
        } else if (13 <= i  && i <= 16){
            y = box_y + 150;
        }
        var puzzle;
        if (i == 16){
            freeSpace = new FreeSpace(x, y, i);
        }else{
            puzzle = new Puzzle(i, x, y, false, i);
            puzzles[i] = puzzle;
        }
        if (i == 16){
            appendFreeSpace(freeSpace.x, freeSpace.y);
        }else{
            appendPuzzle(puzzle.x, puzzle.y, puzzle.number);
        }
    }

}

//find puzzles near freespace to make draggable
function makeDraggable(){
    for (var i = 1; i < 16; i++){
        if (freeSpace.x == puzzles[i].x || freeSpace.y == puzzles[i].y){
            if (puzzles[i].position == freeSpace.position - 1){
                makeRightDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position + 1){
                makeLeftDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position + 4){
                makeUpDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position - 4){
                makeDownDraggable(puzzles[i]);
            }
        }
    }
}

function makeUpDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    var draggablePuzzle = new YAHOO.util.DD('puzzleId' + puzzle.number, 'puzzles', {
        isTarget : false
    });
    draggablePuzzle.startDrag = function (x, y){
        lastDraggedPuzzle = puzzle;
    }
    draggablePuzzle.onDragDrop = function (e, target){
        dragDropCommon();
    }
    draggablePuzzle.setXConstraint(0, 0);
    draggablePuzzle.setYConstraint(50, 0, 5);

}

function makeDownDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    var draggablePuzzle = new YAHOO.util.DD('puzzleId' + puzzle.number, 'puzzles', {
        isTarget : false
    });
    draggablePuzzle.startDrag = function (x, y){
        lastDraggedPuzzle = puzzle;
    }
    draggablePuzzle.onDragDrop = function (e, target){
        dragDropCommon();
    }
    draggablePuzzle.setXConstraint(0, 0);
    draggablePuzzle.setYConstraint(0, 50, 5);

}

function makeLeftDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    var draggablePuzzle = new YAHOO.util.DD('puzzleId' + puzzle.number, 'puzzles', {
        isTarget : false
    });
    draggablePuzzle.startDrag = function (x, y){
        lastDraggedPuzzle = puzzle;
    }
    draggablePuzzle.onDragDrop = function (e, target){
        dragDropCommon();
    }
    draggablePuzzle.setXConstraint(50, 0, 5);
    draggablePuzzle.setYConstraint(0, 0);

}

function makeRightDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    var draggablePuzzle = new YAHOO.util.DD('puzzleId' + puzzle.number, 'puzzles', {
        isTarget : false
    });
    draggablePuzzle.startDrag = function (x, y){
        lastDraggedPuzzle = puzzle;
    }
    draggablePuzzle.onDragDrop = function (e, target){
        dragDropCommon();
    }
    draggablePuzzle.setXConstraint(0, 50, 5);
    draggablePuzzle.setYConstraint(0, 0);

}

function makeDroppable(){
    var droppableFreeSpace = new YAHOO.util.DDTarget('freeSpaceId', 'puzzles');
}

function scramble(){
    var box = new YAHOO.util.Element('box');
    while (box.hasChildNodes()) {
        box.removeChild(box.get('firstChild'));
    }
    var xTemp = freeSpace.x;
    var yTemp = freeSpace.y;
    var positionTemp = freeSpace.position;

    var n = Math.ceil(Math.random() * 15);
    var randomPuzzle = puzzles[n];
    freeSpace.x = randomPuzzle.x;
    freeSpace.y = randomPuzzle.y;
    freeSpace.position = randomPuzzle.position;

    randomPuzzle.x = xTemp;
    randomPuzzle.y = yTemp;
    randomPuzzle.position = positionTemp;

    appendFreeSpace(freeSpace.x, freeSpace.y);

    for (var i = 0; i < 20; i++){
        var randomPuzzle1 = puzzles[Math.ceil(Math.random() * 15)];
        var randomPuzzle2 = puzzles[Math.ceil(Math.random() * 15)];

        xTemp = randomPuzzle1.x;
        yTemp = randomPuzzle1.y;
        positionTemp = randomPuzzle1.position;

        randomPuzzle1.x = randomPuzzle2.x;
        randomPuzzle1.y = randomPuzzle2.y;
        randomPuzzle1.position = randomPuzzle2.position;

        randomPuzzle2.x = xTemp;
        randomPuzzle2.y = yTemp;
        randomPuzzle2.position =positionTemp;
    }

    for (i = 1; i < 16; i ++){
        appendPuzzle(puzzles[i].x, puzzles[i].y, puzzles[i].number);
    }
    this.makeDraggable();
    this.makeDroppable();

}

function sort(){
    var box = new YAHOO.util.Element('box');
    while (box.hasChildNodes()) {
        box.removeChild(box.get('firstChild'));
    }
    puzzles = new Array();
    this.init();
    this.makeDraggable();
    this.makeDroppable();
}

function appendPuzzle(x, y, number){
    var box = new YAHOO.util.Element('box');
    var puzzle = document.createElement('div');
    puzzle.id = 'puzzleId' + number;
    puzzle.innerHTML = number;
    puzzle.className = 'puzzle';
    puzzle.setAttribute('style', 'position:absolute; left:' + x + 'px; top:' + y +'px;')
    box.appendChild(puzzle);
}

function appendFreeSpace(x, y){
    var box = new YAHOO.util.Element('box');
    var freeSpace = document.createElement('div');
    freeSpace.id = 'freeSpaceId';
    freeSpace.className = 'freeSpace';
    freeSpace.setAttribute('style', 'position:absolute; left:' + x + 'px; top:' + y +'px;')
    box.appendChild(freeSpace);
}

function dragDropCommon(){
    //alert ('dragDropCommon');
    var xTemp = freeSpace.x;
    var yTemp = freeSpace.y;
    var positionTemp = freeSpace.position;

    freeSpace.x = lastDraggedPuzzle.x;
    freeSpace.y = lastDraggedPuzzle.y;
    freeSpace.position = lastDraggedPuzzle.position;

    lastDraggedPuzzle.x = xTemp;
    lastDraggedPuzzle.y = yTemp;
    lastDraggedPuzzle.position = positionTemp;

    puzzles[lastDraggedPuzzle.number] = lastDraggedPuzzle;
    //destroy all draggable and dropable
    var box = new YAHOO.util.Element('box');
    box.removeChild(new YAHOO.util.Element('freeSpaceId'));
    appendFreeSpace(freeSpace.x, freeSpace.y);

    box.removeChild(new YAHOO.util.Element('puzzleId' + lastDraggedPuzzle.number));
    appendPuzzle(lastDraggedPuzzle.x, lastDraggedPuzzle.y, lastDraggedPuzzle.number);
    makeDraggable();
    makeDroppable();
}

Related posts:

1. 15puzzles jQuery way
2. 15puzzles ExtJs way
3. 15puzzles Flex way

index.html

    
        
        

        
        

        
        

    
    

15puzzles Ext-Js way



Scramble
Sort


            Blog
            View Source
            Download
        


            jQuery way
            
            Yahoo UI way
            
            Flex way
            
            Google Web Toolkit way
        

    

15puzzles.css

/*
    Document   : 15puzzle
    Created on : Oct 14, 2009, 5:52:32 PM
    Author     : yuri
    Description:
        Purpose of the stylesheet follows.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root {
    display: block;
}

body{

    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    background-color: #e6f8f6;
    color: #2736a4;
    font-weight: bold;
    font-size: 18px;
    font-family: fantasy;
}

.title{
    position: absolute;
    left:92px;
    top: 2px;
}

.box{

    width: 200px;
    height: 200px;
    position: absolute;
    top: 92px;
    left: 92px;
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
    border-top-style: double;
    border-right-width: 8px;
    border-left-width: 8px;
    border-bottom-width: 8px;
    border-top-width: 8px;
    border-right-color: #416a3d;
    border-left-color: #416a3d;
    border-bottom-color: #416a3d;
    border-top-color: #416a3d;
    z-index:-2;

    background-color: #83eead;
    visibility: visible;
}

.puzzle{

    position: absolute;
    width: 42px;
    height: 42px;
    visibility: visible;
    z-index: 2;
    border-top-style: outset;
    border-bottom-style: outset;
    border-right-color: #1224d4;
    border-left-color: #1224d4;
    border-bottom-color: #1224d4;
    border-top-color: #1224d4;
    border-right-width: 4px;
    border-left-width: 4px;
    border-bottom-width: 4px;
    border-top-width: 4px;
    border-left-style: outset;
    border-right-style: outset;
    background-color: #2715ee;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #86dfd5;
    text-align: center;
    vertical-align: middle;
    line-height: 43px;
}

.freeSpace{

    width: 48px;
    height: 48px;
    visibility: visible;
    z-index: -1;
    border-right-style: dotted;
    border-left-style: dotted;
    border-bottom-style: dotted;
    border-top-style: dotted;
    border-right-color: #f894de;
    border-left-color: #f894de;
    border-bottom-color: #f894de;
    border-top-color: #f894de;
    background-color: #16f56d;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
}

.buttons{

    position: absolute;
    top: 100px;
    left: 350px;
    width: 100px;
    height: 300px;
}

.button{

    border-right-style: outset;
    border-left-style: outset;
    border-bottom-style: outset;
    border-top-style: outset;
    border-right-color: #2715ee;
    border-bottom-color: #2715ee;
    border-top-color: #2715ee;
    background-color: #2715ee;
    width: 100px;
    height: 30px;
    vertical-align: bottom;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #86dfd5;
    font-weight: bold;
     border-left-color: #2715ee;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    text-indent: 1px;

    line-height: 30px;
}

.button-clicked{

    border-right-style: inset;
    border-left-style: inset;
    border-bottom-style: inset;
    border-top-style: inset;
    border-right-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    background-color: #ee1515;
    width: 100px;
    height: 30px;
    vertical-align: middle;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    color: #facf32;
    font-weight: bold;
     border-left-color: #d41212;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    position: absolute;
    line-height: 30px;
}

.header-menu{

    position: absolute;
    top: 0px;
    left: 500px;
    width: 500px;
    height: 50px;
    visibility: visible;
}

.header-link{

    font-style: normal;
    font-family: fantasy;
    font-size: 18px;
    color: #2736a4;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.ads{

    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    border-top-style: none;
    border-right-color: #e08989;
    border-left-color: #e08989;
    border-bottom-color: #e08989;
    border-top-color: #e08989;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    position: absolute;
    top: 92px;
    left: 500px;
    width: 300px;
    height: 350px;
    visibility: visible;
}

.others-ways{

    position: absolute;
    top: 92px;
    left: 810px;
    color: #2736a4;
}

.other-way-link{

    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #2736a4;
    line-height: 40px;
}

15puzzles.js

var puzzles;
var lastDraggedPuzzle;
var freeSpace;

function FifteenPuzzles(){
    puzzles = new Array();
    this.init = init;
    this.makeDraggable = makeDraggable;
    this.makeDroppable = makeDroppable;
    this.scramble = scramble;
    this.sort = sort;
}

function Puzzle(number, x, y, isDraggable, position){
    this.number = number;
    this.x = x;
    this.y = y;
    this.isDraggable = isDraggable;
    this.position = position;

}

function FreeSpace(x, y, position){
    this.x = x;
    this.y = y;
    this.position = position;
}

function init(){
    for (var i = 1; i <= 16; i++){
        var box_x = 0;
        var x;
        if (i < 5){
            x = box_x + (i - 1) * 50;
        } else if (5 <= i && i < 9){
            x = box_x + (i - 5) * 50;
        } else if (9 <= i  && i < 13){
            x = box_x + (i - 9) * 50;
        } else if (13 <= i  && i <= 16){
            x = box_x + (i - 13) * 50;
        }
        var box_y = 0;
        var y;
        if (i < 5){
            y = box_y;
        } else if (5 <= i  && i < 9){
            y = box_y + 50;
        } else if (9 <= i  && i < 13){
            y = box_y + 100;
        } else if (13 <= i  && i <= 16){
            y = box_y + 150;
        }
        var puzzle;
        if (i == 16){
            freeSpace = new FreeSpace(x, y, i);
        }else{
            puzzle = new Puzzle(i, x, y, false, i);
            puzzles[i] = puzzle;
        }
        if (i == 16){
            appendFreeSpace(freeSpace.x, freeSpace.y);
        }else{
            appendPuzzle(puzzle.x, puzzle.y, puzzle.number);
        }
    }

}

//find puzzles near freespace to make draggable
function makeDraggable(){
    for (var i = 1; i < 16; i++){
        if (freeSpace.x == puzzles[i].x || freeSpace.y == puzzles[i].y){
            if (puzzles[i].position == freeSpace.position - 1){
                makeRightDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position + 1){
                makeLeftDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position + 4){
                makeUpDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position - 4){
                makeDownDraggable(puzzles[i]);
            }
        }
    }
}

function makeUpDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    var draggablePuzzle = new Ext.dd.DD('puzzleId' + puzzle.number, 'puzzles', {
        isTarget : false
    });
    draggablePuzzle.startDrag = function (x, y){
        lastDraggedPuzzle = puzzle;
    }
    draggablePuzzle.onDragDrop = function (e, target){
        dragDropCommon();
    }
    draggablePuzzle.setXConstraint(0, 0);
    draggablePuzzle.setYConstraint(50, 0, 5);

}

function makeDownDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    var draggablePuzzle = new Ext.dd.DD('puzzleId' + puzzle.number, 'puzzles', {
        isTarget : false
    });
    draggablePuzzle.startDrag = function (x, y){
        lastDraggedPuzzle = puzzle;
    }
    draggablePuzzle.onDragDrop = function (e, target){
        dragDropCommon();
    }
    draggablePuzzle.setXConstraint(0, 0);
    draggablePuzzle.setYConstraint(0, 50, 5);

}

function makeLeftDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    var draggablePuzzle = new Ext.dd.DD('puzzleId' + puzzle.number, 'puzzles', {
        isTarget : false
    });
    draggablePuzzle.startDrag = function (x, y){
        lastDraggedPuzzle = puzzle;
    }
    draggablePuzzle.onDragDrop = function (e, target){
        dragDropCommon();
    }
    draggablePuzzle.setXConstraint(50, 0, 5);
    draggablePuzzle.setYConstraint(0, 0);

}

function makeRightDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    var draggablePuzzle = new Ext.dd.DD('puzzleId' + puzzle.number, 'puzzles', {
        isTarget : false
    });
    draggablePuzzle.startDrag = function (x, y){
        lastDraggedPuzzle = puzzle;
    }
    draggablePuzzle.onDragDrop = function (e, target){
        dragDropCommon();
    }
    draggablePuzzle.setXConstraint(0, 50, 5);
    draggablePuzzle.setYConstraint(0, 0);

}

function makeDroppable(){
    var droppableFreeSpace = new Ext.dd.DDTarget('freeSpaceId', 'puzzles');
}

function scramble(){
    //$("#box > *").draggable('destroy');
    //$("#box > *").droppable('destroy');
    Ext.get('freeSpaceId').remove();
    Ext.select('.puzzle').remove();
    var xTemp = freeSpace.x;
    var yTemp = freeSpace.y;
    var positionTemp = freeSpace.position;

    var n = Math.ceil(Math.random() * 15);
    var randomPuzzle = puzzles[n];
    freeSpace.x = randomPuzzle.x;
    freeSpace.y = randomPuzzle.y;
    freeSpace.position = randomPuzzle.position;

    randomPuzzle.x = xTemp;
    randomPuzzle.y = yTemp;
    randomPuzzle.position = positionTemp;

    appendFreeSpace(freeSpace.x, freeSpace.y);

    for (var i = 0; i < 20; i++){
        var randomPuzzle1 = puzzles[Math.ceil(Math.random() * 15)];
        var randomPuzzle2 = puzzles[Math.ceil(Math.random() * 15)];

        xTemp = randomPuzzle1.x;
        yTemp = randomPuzzle1.y;
        positionTemp = randomPuzzle1.position;

        randomPuzzle1.x = randomPuzzle2.x;
        randomPuzzle1.y = randomPuzzle2.y;
        randomPuzzle1.position = randomPuzzle2.position;

        randomPuzzle2.x = xTemp;
        randomPuzzle2.y = yTemp;
        randomPuzzle2.position =positionTemp;
    }

    for (i = 1; i < 16; i ++){
        appendPuzzle(puzzles[i].x, puzzles[i].y, puzzles[i].number);
    }
    this.makeDraggable();
    this.makeDroppable();

}

function sort(){
    Ext.get('freeSpaceId').remove();
    Ext.select('.puzzle').remove();
    puzzles = new Array();
    this.init();
    this.makeDraggable();
    this.makeDroppable();
}

function appendPuzzle(x, y, number){
    var box = Ext.get('box');
    Ext.DomHelper.append(box,'
'
        + number
        + '

');
}

function appendFreeSpace(x, y){
    var box = Ext.get('box');
    Ext.DomHelper.append(box, '
'
        + '

')
}

function dragDropCommon(){
    var xTemp = freeSpace.x;
    var yTemp = freeSpace.y;
    var positionTemp = freeSpace.position;

    freeSpace.x = lastDraggedPuzzle.x;
    freeSpace.y = lastDraggedPuzzle.y;
    freeSpace.position = lastDraggedPuzzle.position;

    lastDraggedPuzzle.x = xTemp;
    lastDraggedPuzzle.y = yTemp;
    lastDraggedPuzzle.position = positionTemp;

    puzzles[lastDraggedPuzzle.number] = lastDraggedPuzzle;
    Ext.get('freeSpaceId').remove();
    appendFreeSpace(freeSpace.x, freeSpace.y);

    Ext.get('puzzleId' + lastDraggedPuzzle.number).remove();
    appendPuzzle(lastDraggedPuzzle.x, lastDraggedPuzzle.y, lastDraggedPuzzle.number);
    makeDraggable();
    makeDroppable();
}

Related posts:

1. 15puzzles Flex way
2. 15puzzles jQuery way
3. 15puzzles YUI way

The purpose of this explanation is only to shift down code, because of beginning of code is not displayed.

So it will be clever do not to read it at all.

But in all cases implementation consists of index.html, 15puzzles.css and 15puzzles.js.

index.html contains all page mark up.

15puzzles.css contains css rules.

And 15puzzles.js contains all game logic and implementation.

Its also does not help. I need to do something with code highlighting plugin. Html code below is not completely displayed and also not formatted well. Please download whole project.

index.html

    
        
        

        
        
        

    
    

15puzzles jQuery way



Scramble
Sort


            
                  Blog
            
            View Source
            Download
           

           
        

            Ext-Js way
            
            Yahoo UI way
            
            Flex way
            
            Google Web Toolkit way


    

15puzzles.css

/*
    Document   : 15puzzle
    Created on : Oct 14, 2009, 5:52:32 PM
    Author     : yuri
    Description:
        Purpose of the stylesheet follows.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root {
    display: block;
}

body{

    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    background-color: #f5f3d9;
    color: #e42020;
    font-weight: bold;
    font-size: 18px;
    font-family: fantasy;
}

.title{
    position: absolute;
    left:92px;
    top: 2px;
}

.box{

    width: 200px;
    height: 200px;
    position: absolute;
    top: 92px;
    left: 92px;
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
    border-top-style: double;
    border-right-width: 8px;
    border-left-width: 8px;
    border-bottom-width: 8px;
    border-top-width: 8px;
    border-right-color: #e08b10;
    border-left-color: #e08b10;
    border-bottom-color: #e08b10;
    border-top-color: #e08b10;
    z-index:-2;

    background-color: #eef516;
    visibility: visible;
}

.puzzle{

    position: absolute;
    width: 42px;
    height: 42px;
    visibility: visible;
    z-index: 2;
    border-top-style: outset;
    border-bottom-style: outset;
    border-right-color: #d41212;
    border-left-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    border-right-width: 4px;
    border-left-width: 4px;
    border-bottom-width: 4px;
    border-top-width: 4px;
    border-left-style: outset;
    border-right-style: outset;
    background-color: #ee1515;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #fce5c7;
    text-align: center;
    vertical-align: bottom;
    line-height: 43px;
}

.freeSpace{

    width: 48px;
    height: 48px;
    visibility: visible;
    z-index: -1;
    border-right-style: dotted;
    border-left-style: dotted;
    border-bottom-style: dotted;
    border-top-style: dotted;
    border-right-color: #f894de;
    border-left-color: #f894de;
    border-bottom-color: #f894de;
    border-top-color: #f894de;
    background-color: #eef516;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
}

.buttons{

    position: absolute;
    top: 100px;
    left: 350px;
    width: 100px;
    height: 300px;
}

.button{

    border-right-style: outset;
    border-left-style: outset;
    border-bottom-style: outset;
    border-top-style: outset;
    border-right-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    background-color: #ee1515;
    width: 100px;
    height: 30px;
    vertical-align: bottom;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #fce5c7;
    font-weight: bold;
     border-left-color: #d41212;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    text-indent: 1px;

    line-height: 30px;
}

.button-clicked{

    border-right-style: inset;
    border-left-style: inset;
    border-bottom-style: inset;
    border-top-style: inset;
    border-right-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    background-color: #ee1515;
    width: 100px;
    height: 30px;
    vertical-align: middle;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    color: #fce5c7;
    font-weight: bold;
     border-left-color: #d41212;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    position: absolute;
    line-height: 30px;
}

.header-menu{

    position: absolute;
    top: 0px;
    left: 500px;
    width: 500px;
    height: 50px;
    visibility: visible;
}

.header-link{

    font-style: normal;
    font-family: fantasy;
    font-size: 18px;
    color: #c91d1d;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.ads{

    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    border-top-style: none;
    border-right-color: #e08989;
    border-left-color: #e08989;
    border-bottom-color: #e08989;
    border-top-color: #e08989;
    border-right-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;
    position: absolute;
    top: 92px;
    left: 500px;
    width: 300px;
    height: 350px;
    visibility: visible;
}

.others-ways{

    position: absolute;
    top: 92px;
    left: 810px;
    color: #e31818;
}

.other-way-link{

    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    color: #c91d1d;
    line-height: 40px;
}

15puzzles.js

var puzzles;
var lastDraggedPuzzle;
var freeSpace;

function FifteenPuzzles(){
    puzzles = new Array();
    this.init = init;
    this.makeDraggable = makeDraggable;
    this.makeDroppable = makeDroppable;
    this.scramble = scramble;
    this.sort = sort;
}

function Puzzle(number, x, y, isDraggable, position){
    this.number = number;
    this.x = x;
    this.y = y;
    this.isDraggable = isDraggable;
    this.position = position;

}

function FreeSpace(x, y, position){
    this.x = x;
    this.y = y;
    this.position = position;
}

function init(){
    for (var i = 1; i <= 16; i++){
        var box_x = 0;
        var x;
        if (i < 5){
            x = box_x + (i - 1) * 50;
        } else if (5 <= i && i < 9){
            x = box_x + (i - 5) * 50;
        } else if (9 <= i  && i < 13){
            x = box_x + (i - 9) * 50;
        } else if (13 <= i  && i <= 16){
            x = box_x + (i - 13) * 50;
        }
        var box_y = 0;
        var y;
        if (i < 5){
            y = box_y;
        } else if (5 <= i  && i < 9){
            y = box_y + 50;
        } else if (9 <= i  && i < 13){
            y = box_y + 100;
        } else if (13 <= i  && i <= 16){
            y = box_y + 150;
        }
        var puzzle;
        if (i == 16){
            freeSpace = new FreeSpace(x, y, i);
        }else{
            puzzle = new Puzzle(i, x, y, false, i);
            puzzles[i] = puzzle;
        }
        if (i == 16){
            appendFreeSpace(freeSpace.x, freeSpace.y);
        }else{
            appendPuzzle(puzzle.x, puzzle.y, puzzle.number);
        }
    }
    $('#box').css('height', '200');

}

//find puzzles near freespace to make draggable
function makeDraggable(){
    for (var i = 1; i < 16; i++){
        if (freeSpace.x == puzzles[i].x || freeSpace.y == puzzles[i].y){
            if (puzzles[i].position == freeSpace.position - 1){
                jQMakeRightDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position + 1){
                jQMakeLeftDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position + 4){
                jQMakeUpDraggable(puzzles[i]);
            } else if (puzzles[i].position == freeSpace.position - 4){
                jQMakeDownDraggable(puzzles[i]);
            }
        }
    }
}

function jQMakeUpDraggable(puzzle){
    $('#puzzleId' + puzzle.number).draggable({
        axis: 'y',
        containment: [puzzle.x - 100, puzzle.y + 50, puzzle.x + 100, puzzle.y + 100],
        stop: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        },
        start: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        }
    });
}

function jQMakeDownDraggable(puzzle){
    // alert("puzzle " + puzzle.number + " must be draggable");
    $('#puzzleId' + puzzle.number).draggable({
        axis: 'y',
        containment: [puzzle.x - 100, puzzle.y + 100, puzzle.x + 100, puzzle.y + 150],
        stop: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        },
        start: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        }
    });
}

function jQMakeLeftDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    $('#puzzleId' + puzzle.number).draggable({
        axis: 'x',
        containment: [puzzle.x + 50, puzzle.y - 100, puzzle.x + 50, puzzle.y + 100],
        stop: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        },
        start: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        }
    });
}

function jQMakeRightDraggable(puzzle){
    //alert("puzzle " + puzzle.number + " must be draggable");
    $('#puzzleId' + puzzle.number).draggable({
        axis: 'x',
        containment: [puzzle.x + 100, puzzle.y - 100, puzzle.x + 150, puzzle.y + 100],
        stop: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        },
        start: function(event, ui) {
            lastDraggedPuzzle = puzzle;
        }

    });
}

function makeDroppable(){
    $('#freeSpaceId').droppable({
        drop: function() {
            var xTemp = freeSpace.x;
            var yTemp = freeSpace.y;
            var positionTemp = freeSpace.position;

            freeSpace.x = lastDraggedPuzzle.x;
            freeSpace.y = lastDraggedPuzzle.y;
            freeSpace.position = lastDraggedPuzzle.position;

            lastDraggedPuzzle.x = xTemp;
            lastDraggedPuzzle.y = yTemp;
            lastDraggedPuzzle.position = positionTemp;

            puzzles[lastDraggedPuzzle.number] = lastDraggedPuzzle;
            //destroy all draggable and dropable
            $("#box > *").draggable('destroy');
            $("#box > *").droppable('destroy');
            $('#freeSpaceId').remove();
            appendFreeSpace(freeSpace.x, freeSpace.y);

            $('#puzzleId' + lastDraggedPuzzle.number).remove();
            appendPuzzle(lastDraggedPuzzle.x, lastDraggedPuzzle.y, lastDraggedPuzzle.number);
            makeDraggable();
            makeDroppable();
        }
    });

}

function scramble(){
    $("#box > *").draggable('destroy');
    $("#box > *").droppable('destroy');
    $('#freeSpaceId').remove();
    $('.puzzle').remove();
    var xTemp = freeSpace.x;
    var yTemp = freeSpace.y;
    var positionTemp = freeSpace.position;

    var n = Math.ceil(Math.random() * 15);
    var randomPuzzle = puzzles[n];
    freeSpace.x = randomPuzzle.x;
    freeSpace.y = randomPuzzle.y;
    freeSpace.position = randomPuzzle.position;

    randomPuzzle.x = xTemp;
    randomPuzzle.y = yTemp;
    randomPuzzle.position = positionTemp;

    appendFreeSpace(freeSpace.x, freeSpace.y);

    for (var i = 0; i < 20; i++){
        var randomPuzzle1 = puzzles[Math.ceil(Math.random() * 15)];
        var randomPuzzle2 = puzzles[Math.ceil(Math.random() * 15)];
        xTemp = randomPuzzle1.x;
        yTemp = randomPuzzle1.y;
        positionTemp = randomPuzzle1.position;

        randomPuzzle1.x = randomPuzzle2.x;
        randomPuzzle1.y = randomPuzzle2.y;
        randomPuzzle1.position = randomPuzzle2.position;

        randomPuzzle2.x = xTemp;
        randomPuzzle2.y = yTemp;
        randomPuzzle2.position =positionTemp;
    }

    for (i = 1; i < 16; i ++){
        appendPuzzle(puzzles[i].x, puzzles[i].y, puzzles[i].number);
    }
    this.makeDraggable();
    this.makeDroppable();

}

function sort(){
    $("#box > *").draggable('destroy');
    $("#box > *").droppable('destroy');
    $('#freeSpaceId').remove();
    $('.puzzle').remove();
    puzzles = new Array();
    this.init();
    this.makeDraggable();
    this.makeDroppable();
}

function appendPuzzle(x, y, number){
    $('#box').append('
'
        + number
        + '

');
}

function appendFreeSpace(x, y){
    $('#box').append('
'
        + '

');
}

Related posts:

1. 15puzzles ExtJs way
2. 15puzzles Flex way
3. 15puzzles YUI way