jQuery 棋盘状的可排序 div

Question

我在 jquery 中使用 sortable() 函数以便在 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

我想你想使用 draggable
这是你想要达到的目标吗？ 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;
}