<head>
<title>jQuery拼图</title>
<script src="Scripts/jquery-3.3.1.js" type="text/javascript"></script>
<style type="text/css">
*{padding:0px;margin:0px;}
.mytable{width: 300px;border:1px solid #aaccff;}
.mytable td{text-align:center;}
.mytable td img{border:none;height:150px;width:150px;}
.mytable td img.cur{border:1px dotted red;}
.box{border:1px solid #aaccff;padding:10px;margin:5px 3px;line-height:25px;}
</style>
<script type="text/javascript">
$(function () {
$('#table1').on('click','img',function () {
var id = parseInt($(this).parent().attr("id"));
var up = $("td[id=" + (id - 3) + "]").is(':has(img)');
var down = $("td[id=" + (id + 3) + "]").is(':has(img)');
var left = $("td[id=" + (id - 1) + "]").is(':has(img)');
var right =$("td[id=" + (id + 1) + "]").is(':has(img)');
if (up == false && id-3>=1) {
$(this).remove().clone().appendTo("td[id=" + (id - 3) + "]");
} else if (down == false && id + 3 <= 9) {
$(this).remove().clone().appendTo("td[id=" + (id + 3) + "]");
} else if (left == false && id%3!=1) {
$(this).remove().clone().appendTo("td[id=" + (id - 1) + "]");
} else if (right == false && id % 3 != 0) {
$(this).remove().clone().appendTo("td[id=" + (id + 1) + "]");
}
})
})
</script>
</head>
<body style="font-size:12px;">
<div class="box">
<span style="color:Red;font-weight:bold;"></span>请使用JQuery完成拼图功能。<br />
只要求能够实现每一幅小图能够正确变动位置即可。
</div>
<div id="temp"></div>
<div class="box">
<table id="table1" class="mytable">
<tr>
<td id="1">
<img src="Files/01.gif" alt=""/></td>
<td id="2">
<img src="Files/02.gif" alt=""/></td>
<td id="3">
<img src="Files/03.gif" alt=""/></td>
</tr>
<tr>
<td id="4">
<img src="Files/04.gif" alt=""/></td>
<td id="5">
<img src="Files/05.gif" alt=""/></td>
<td id="6">
<img src="Files/06.gif" alt=""/></td>
</tr>
<tr>
<td id="7">
<img src="Files/07.gif" alt=""/></td>
<td id="8">
<img src="Files/08.gif" alt=""/></td>
<td id="9"></td>
</tr>
</table>
</div>
</body>