jQuery棋盘状的可排序div

问题描述

我在jquery中使用sortable()函数来在div中构建类似于棋盘"的东西.我要实现的事情是让div包含可排序项目，例如可排序示例，您可以将它们拖放到预定义的位置(例如在国际象棋上).除了可排序的示例外，我还想做类似此(假设这是一个div).

Im using the sortable() function in jquery in order to build something like a "chessboard" in a div. The thing that i want to implement is to have a div with sortable items something like this sortable example that you can drag and drop them in predefined places (like on chess). In addition to the sortable example i want to do something like this (suppose that this is a div).

到目前为止，这是我的代码

Here is my code so far

    <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>

推荐答案

我认为您想使用可拖动
这是您要达到的目标吗? http://jsfiddle.net/GbQH2/3/

I think you want to use draggable
Is this what you want to achieve? 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;
}

这篇关于jQuery棋盘状的可排序div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！