One, to achieve the construction of the puzzle:
<div class= "box" >
<table id= "table1" class= "MyTable" >
<tr>
<TD id= "1" ></td>
<TD id= "2" ></td>
<TD id= "3" ></td>
</tr>
<tr>
<TD id= "4" ></td>
<TD id= "5" ></td>
<TD id= "6" ></td>
</tr>
<tr>
<TD id= "7" ></td>
<TD id= "8" ></td>
<TD id= "9" ></td>
</tr>
</table>
</div>
1) as follows:
2) jquery Code:
<script type= "Text/javascript" >
$ (function ()
{
$ ("TD"). Click (Function (Event)
{
var id = $ (this). Prop ("id");//Get the ID of the selected picture
if (parseint (ID) + 3 < && $ ("td[id=" + (parseint (ID) + 3) + "]"). Children (). length== 0)//Move Down
{
$ (this). FIND ("img"). AppendTo ("td[id=" + (parseint (ID) + 3) + "]");
}
else if (parseint (ID) -3>0 && $ ("td[id=" + (parseint (ID)-3) + "]"). Children (). length==0)//Move Up
{
$ (this). FIND ("img"). AppendTo ("td[id=" + (parseint (ID)-3) + "]");
}
else if (parseint (ID)% 3! = 0 && $ ("td[id=" + (parseint (ID) + 1) + "]"). Children (). Length = = 0)//Shift right
{
$ (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>
jquery implements a simple puzzle game