jquery chessboard-like Sortable div

Question

Я использую функцию sortable() в jquery, чтобы построить что-то вроде «шахматной доски» в div. Вещь, которую я хочу реализовать, состоит в том, чтобы иметь 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; 
}