一，实现拼图的搭建：
<div class="box">
<table id="table1" class="mytable">
<tr>
<td id="1"><img src="files/01.gif" /></td>
<td id="2"><img src="files/02.gif" /></td>
<td id="3"><img src="files/03.gif" /></td>
</tr>
<tr>
<td id="4"><img src="files/04.gif" /></td>
<td id="5"><img src="files/05.gif" /></td>
<td id="6"><img src="files/06.gif" /></td>
</tr>
<tr>
<td id="7"><img src="files/07.gif" /></td>
<td id="8"><img src="files/08.gif" /></td>
<td id="9"></td>
</tr>
</table>
</div>
1）效果图如下：
2）jquery代码：
<script type="text/javascript">
$(function ()
{
$("td").click(function (event)
{
var id = $(this).prop("id");//获取选中图片的id
if (parseint(id) + 3 < 10 && $("td[id=" + (parseint(id) + 3) + "]").children().length== 0)//向下移
{
$(this).find("img").appendto("td[id=" +(parseint(id) + 3)+ "]");
}
else if (parseint(id)-3>0 && $("td[id="+(parseint(id)-3)+"]").children().length==0)//向上移
{
$(this).find("img").appendto("td[id=" + (parseint(id) - 3) + "]");
}
else if (parseint(id) % 3 != 0 && $("td[id=" + (parseint(id) + 1) + "]").children().length == 0)//向右移
{
$(this).find("img").appendto("td[id=" + (parseint(id) + 1) + "]");
}
else if (parseint(id) % 3 != 1 && $("td[id=" + (parseint(id) - 1) + "]").children().length == 0)
{
$(this).find("img").appendto("td[id=" + (parseint(id) - 1) + "]");
}
})
})
</script>
......