jQueryで数字並べを作ってみた

勉強がてら空いてる時間になんとなく作ってみました。
jQueryのバージョンは1.5.2
最初"position"で配置、入れ替えなど判定するように組んだのですがやっぱりやめて、アプローチをかえ要素自体の並び順で判定するようにしました。
ブロックが動くときのアニメーションだけ仕方なく"position"にて動かしています。

数字並べ＞

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>数字並べ</title>
<meta name="keywords" content="">
<meta name="description" content="">
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./default.js"></script>
<style type="text/css">
body,ul,li {
	margin:0;
	padding:0;
	text-align:center;
	font-family:serif;
}
ul {
	position:relative;
	margin:200px auto 50px auto;
	width:200px;
	height:200px;
	border:1px solid #666666;
}
ul li {
	position:relative;
	float:left;
	width:48px;
	height:48px;
	list-style:none;
	border:1px solid #999999;
	font-size:260%;
	text-align:center;
	line-height:1;
	background-color:#ffffff;
	z-index:1;
}
ul li#No16 {
	z-index:-1;
	border:none;
	padding:1px;
	text-indent:-9999px;
}
</style>
</head>
<body>
<ul>
	<li id="No1">1</li>
	<li id="No2">2</li>
	<li id="No3">3</li>
	<li id="No4">4</li>
	<li id="No5">5</li>
	<li id="No6">6</li>
	<li id="No7">7</li>
	<li id="No8">8</li>
	<li id="No9">9</li>
	<li id="No10">10</li>
	<li id="No11">11</li>
	<li id="No12">12</li>
	<li id="No13">13</li>
	<li id="No14">14</li>
	<li id="No15">15</li>
	<li id="No16">16</li>
</ul>
</body>
</html>

javascript

$(function(){
	$.fn.extend ({
			shuffle: function() { //The number is shuffled. 
				$.shuffle = function(arr) {
					for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);
					return arr;
				}
				return this.each(function(){
					var items = $(this).children().clone(true);
					return (items.length) ? $(this).html($.shuffle(items)) : this;
				});
			},
			click_target: function() { //The number that can be clicked is specified. 
				var click_box = [($('#No16').index() - 4),($('#No16').index() + 1),($('#No16').index() + 4),($('#No16').index() - 1)];
				this.each(function(){
					var click_block = $(this).index();
					if( (click_block == click_box[0]) || ((click_block == click_box[1]) && (click_block !== 4) && (click_block !== 8) && (click_block !== 12)) ||  (click_block == click_box[2]) || ((click_block == click_box[3]) && (click_block !== 3) && (click_block !== 7) && (click_block !== 11)) ){
						$(this).css({'background-color':'#eeeeee','cursor':'pointer'}).hover(
							function(){$(this).css('background-color','#ffccff');},
							function(){$(this).css('background-color','#eeeeee');}
						);
						$(this).addClass('selected');
					}
				});
			},
			move: function() { //The number is moved.
				$(this).addClass('click_btn');
				$('ul li').removeClass('selected').each(function(){
					var li_position = $(this).position();
					$(this).css({'top':li_position.top + 'px','left':li_position.left + 'px'});
				});
				$('ul li').css('position','absolute');
				var move_number_id = this.attr('id');
				var move_number_html = this.html();
				this.animate({'left':$('#No16').css('left'),'top':$('#No16').css('top')},50);
				$('#No16').animate({'left':this.css('left'),'top':this.css('top')},{
					complete: function(){
						$('ul li').css({'position':'relative','top':'0px','left':'0px'});
						$('#No16').after('<li id="' + move_number_id + '">' + move_number_html + '</li>').remove();
						$('.click_btn').after('<li id="No16">16</li>').remove();
						$('ul li').judgment();
					}
				},50);
				$(this).addClass('click_btn');
			},
			judgment: function(){ //It judges whether to become complete.
				this.addClass('position_out');
				this.each(function(){
					var id_check = $(this).attr('id').replace('No','');
					if((id_check-1) == $(this).index()) $(this).removeClass('position_out');
				});
				if($('.position_out').length == 0) {
					alert('Congratulations!');
					$('ul li').css('background-color','#ffffff');
					$('ul').shuffle();
					$('ul li').click_target();
				} else {
					$('ul li').unbind().css({'background-color':'#ffffff','cursor':'default'}).click_target();
				}
			}
	});

	$(document).ready(function(){
		$('ul').shuffle();
		$('ul li').click_target();
		$('.selected').live('click',function(){
			$(this).move();
		});
	});
});

思ったより苦労せず動きました。＞＜