用jQuery UI做簡單九宮格拼圖

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

發佈留言