0

divで「チェス盤」のようなものを構築するために、jqueryでsortable（）関数を使用しています。私が実装したいのは、この並べ替え可能な例のような並べ替え可能なアイテムを含む div を用意し、定義済みの場所 (チェスなど) にドラッグ アンド ドロップできるようにすることです。ソート可能な例に加えて、私はこのようなことをしたいと思っています(これが 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>
4

1 に答える 1

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;
}
于 2012-04-27T10:20:40.277 に答える