1 <html>
2 <head>
3 <title>test</title>
4 <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
5 <script type="text/javascript">
6 $(function () {
7 //第一步：画界面
8 var sHtml = "<tr>";
9 var max = 16;
10 for (var i = 1; i <= max; i++) {
11 if (i < max) {
12 sHtml += "<td>" + i + "</td>";
13 if (i % 4 == 0) {
14
15 sHtml += "</tr><tr>";
16 }
17 } else {
18 sHtml += "<td></td>";
19 sHtml += "</tr>";
20
21 }
22
23 }
24
25 $("#grid").html(sHtml);
26
27 //第二步：处理数字的移动
28 $("#grid td").click(function (e) {
29 //在处理事件之前找到要移动的元素
30 $td = $(this); //得到当前对象
31
32 var idx = $td.prevAll().length; //查找当前元素之前的同辈元素的长度
33
34 var $left = $td.prev(); //查找当前元素之前的一个同辈元素
35
36 var $right = $td.next(); //查找当前之后的一个同辈元素
37
38 var $top = $td.parent().prev().children('td:eq(' + idx + ')'); //查找当前元素上一行对应的位置td
39
40 var $bottom = $td.parent().next().children('td:eq(' + idx + ')'); //查找当前元素下一行对应的的位置td
41
42
43
44 var $target = null; //定义一个目标元素
45
46 //如果目标位置存在并且内容为空,则确定目标元素的位置
47 if ($top && $top.html() == '') {
48 $target = $top;
49
50 } else if ($right && $right.html() == '') {
51 $target = $right;
52
53 } else if ($bottom && $bottom.html() == '') {
54 $target = $bottom;
55
56 } else if ($left && $left.html() == '') {
57 $target = $left;
58
59 }
60
61
62 //如果目标元素不为空
63 if ($target) {
64 //设置目标元素的内容为当前点击td的内容
65 $target.html($td.html());
66 $td.html(""); //清空点击的td
67 }
68
69 });
70 });
71 </script>
72
73 <style type="text/css">
74 #grid
75 {
76 margin-top: 2em;
77 margin-bottom: 1em;
78 border-collapse: separate;
79 border-spacing: 2px;
80 font-size: 26px;
81 border:2px;
82 padding:2px;
83 }
84 #grid td
85 {
86 border-bottom: soild 1px #B2B2B2;
87 border-right: soild 1px #B2B2B2;
88 background: #F3F3F3;
89 text-align: center;
90 white-space: nowrap;
91 cursor: pointer;
92 padding: 4px;
93 width: 30px;
94 empty-cells: show;
95 border:2px;
96
97 }
98 </style>
99 </head>
100 <body>
101 <div>
102 <center>
103 <table id="grid">
104 </table>
105 </center>
106 </div>
107 </body>
108 </html>
