jquery chessboard-like Sortable div

Question

在jquery中使用sortable（）函數來構建一個像div中的「棋盤」之類的東西。我想實現的東西是有一個與可排序項目的東西這樣的sortable example，你可以將它們拖放到預定義的地方（如國際象棋）。除了這個可排序的例子，我想要做一些像this（假設這是一個div）。

這裏是我到目前爲止的代碼

<style> 
#sortable { list-style-type: none; margin: 0; padding: 0; } 
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } 
    .class { width: 350px; height: 350px; } 
</style> 
<script> 
$(function() { 
    $("#sortable").sortable(); 
    $("#sortable").disableSelection(); 
}); 
</script> 


<div class="demo"> 

<ul id="sortable"> 
<li class="ui-state-default">1</li> 
<li class="ui-state-default">2</li> 
<li class="ui-state-default">3</li> 
<li class="ui-state-default">4</li> 
<li class="ui-state-default">5</li> 
</ul> 

</div> 

Answer 1

我想你想使用拖動
這是你想要達到什麼樣的？ http://jsfiddle.net/GbQH2/3/

var original; 
$("#sortable li").draggable({ 
    grid: [100,100], 
    containment:'#demo', 
    start:function(event, ui){ 

     original = $(ui.helper).position(); 
    } 
}); 
$('#sortable li').each(function(){ 
    $(this).css({top:$(this).position().top,left:$(this).position().left}); 
}); 
$('#sortable li').css({position:'absolute'}); 

$("#sortable li").bind("dragstop", function(event, ui) { 
    $("#sortable li").each(function(){ 
     if ($(this).hasClass('ui-draggable-dragging')) return; 
     if(compareOffset($(this).offset(),ui.offset)){ 
      console.log(original); 
      $(this).css({left:original.left,top:original.top}); 
      console.log($(this).position()); 
      return; 
     }   
    }); 
}); 

function compareOffset(offset1, offset2){ 
    return offset1.top==offset2.top && offset1.left==offset2.left; 
}