jQuery UI提供瞭許多非常有用的工具，如draggable、droppable等。這可以讓我們用很少的代碼實現復雜的功能，並且做到多瀏覽器兼容。
這個九宮格拼圖根據需求的不同，我做瞭兩個版本。由於兩個版本的JS代碼變化還是比較大的，所以我準備分開來講。先講最初也是最簡單的版本。一步步來。
首先建好HTML文件，把你的9張切割好的圖片都扔進去：
[html]
<!doctype>
<html>
<head>
</head>
<body>
<p id="jigsaw">
<img src="images/puzzle_r1_c1.gif" width="150" height="100" alt="Puzzle Piece"/>
<img src="images/puzzle_r1_c2.gif" width="150" height="100" alt="Puzzle Piece"/>
<img src="images/puzzle_r1_c3.gif" width="150" height="100" alt="Puzzle Piece"/>
<img src="images/puzzle_r2_c1.gif" width="150" height="100" alt="Puzzle Piece"/>
<img src="images/puzzle_r2_c2.gif" width="150" height="100" alt="Puzzle Piece"/>
<img src="images/puzzle_r2_c3.gif" width="150" height="100" alt="Puzzle Piece"/>
<img src="images/puzzle_r3_c1.gif" width="150" height="100" alt="Puzzle Piece"/>
<img src="images/puzzle_r3_c2.gif" width="150" height="100" alt="Puzzle Piece"/>
<img src="images/puzzle_r3_c3.gif" width="150" height="100" alt="Puzzle Piece"/>
</p>
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="scripts/jigsaw.js"></script>
</body>
</html>
註意：圖片插入順序需要為正確順序。稍後會用JS來打亂圖片的順序。
加上CSS使圖片呈九宮格分佈：
[css]
#jigsaw{float:left;width:450px;}
#jigsaw IMG{float:left;width:150px;height:100px;}
開始編寫我的jigsaw.js。首先記錄一下我們經常需要用到的量：
[javascript]
var jigsaw = $('#jigsaw'),
imgs = jigsaw.find("IMG");
var col = 3,
row = 3,
match = col * row,
width = imgs.width(),
height = imgs.height(),
order = new Array();
接著，做一些準備工作。在這裡，我為瞭便於判斷圖片的順序，將正確的順序寫入圖片的ID中。
[javascript] view plaincopy
imgs.each(function(i){
$(this).attr('id','jigsaw' + i);
$(this).addClass("ready");
});
然後，打亂圖片的順序。
這裡用到瞭上面一段代碼中，給圖片加的"ready"類。
思路是：在有"ready"這個class的圖片中，隨機選擇一張圖片，按從左到右、從上到下的順序依次插入九宮格的相應位置，然後去掉它的"ready"類，直至9張圖片位置都調整完成，match這個變量減為0。同時，在圖片下面插入9個用於吸附圖片的DIV。
[javascript]
for( match; match>0; match– ){
$("<p/>").appendTo(jigsaw);
var now = col * row – match,
nowCol = now % col,
nowRow = parseInt( now / col );
var selectImg = imgs.filter(".ready").eq( parseInt( Math.random() * 10 ) % match );
selectImg.css({
'left': nowCol * width,
'top': nowRow * height
});
selectImg.removeClass("ready");
order[now] = selectImg.attr('id').replace(/jigsaw/i,"");
}
如上，我用imgs.filter(".ready")先選出帶有"ready"這個類的圖片，然後用隨機數選出第parseInt(Math.random()*10)%match張圖片，將圖片放到相應位置。
改變位置後，我將目前的位置順序記錄到數組order中。
做這步之後，還要將CSS做一些改動。如下：
[css]
#jigsaw{float:left; width:450px; margin:103px 0 0 150px; position:relative; z-index:1;}
#jigsaw DIV{float:left; width:150px; height:100px; padding:0;}
#jigsaw IMG{float:left; width:150px; height:100px; font-size:3em; color:#fff; background:#ccc; position:absolute; z-index:2;}
接下來就要用神奇的jQuery UI來實現圖片的拖放功能瞭。
思路：圖片拖到對應位置附近，就會被“吸附”進對應的DIV中，並且不能再被拖動。
[javascript]
$('DIV', jigsaw).each( function(i){
var obj = $( "#jigsaw" + order[i] );
if( obj.attr('id') == 'jigsaw' + i ){
match++;
obj.appendTo( $(this) ).addClass("dropped");
}
else{
obj.draggable();
$(this).droppable({
drop:function( event, ui ){
if( ui.draggable.attr('id')== 'jigsaw' + i ){
ui.draggable.appendTo($(this)).addClass("dropped");
match++;
ui.draggable.draggable("disable");
$(this).droppable("disable");
if( match == 9 ){alert("Match!");}
}
}
});
}
});
如上，首先按排列順序檢查每張圖片，是否正好分佈在對應的位置。如果已經在對應的位置，則將它挪入對應的DIV中，給它一個class為"dropped"，match數加1。
dropped的CSS：
[css]
#jigsaw IMG.dropped{ position:static !important;}
將圖片插入對應的p中後，需要將position屬性更改為static，則圖片會自動與DIV對齊。如果圖片沒有在對應位置，使用jQuery UI的Draggable方法使圖片可以被拖動，並且使用Droppable方法使對應的DIV可以吸附圖片。
在DIV吸附圖片的時候判斷這張圖片是不是被吸附在對應的DIV上，是的話給它加上"dropped"類，match數加1，並且禁掉這個DIV的可吸附性。
當match為9的時候，即為9張圖片都已經拖到對應位置，給出已經拼圖完成的提示就大功告成啦！
另外一個版本比這個稍微高級一點。圖片拖對位置之後，還可以重新被拖出去。雖說是在這個版本的基礎上改的，但是基本上面目全非瞭T-T。下次放上來。
作者：jyee721