Question

中的这个示例

我遇到拖放问题表3 - sortable3应该只能接收一个项目。

这是我的HTML

<div class="demo">

<ul id="sortable1" class='droptrue'>
    <li class="ui-state-default">Can be dropped..</li>
    <li class="ui-state-default">..on an empty list</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class='dropfalse'>
    <li class="ui-state-highlight">Cannot be dropped..</li>
    <li class="ui-state-highlight">..on an empty list</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
</ul>

<ul id="sortable3" class='droptrue'>
</ul>

我的CSS

#sortable1, #sortable2, #sortable3{
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    float: left; 
    margin-right: 10px; 
    background: #eee; 
    padding: 5px; 
    width: 143px;
}

#sortable1 li, #sortable2 li, #sortable3 li{
    margin: 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
}

我的剧本

$(function() {
    $("ul.droptrue").sortable({
        connectWith: "ul"
    });

    $("ul.dropfalse").sortable({
        connectWith: "ul",
        dropOnEmpty: false
    });

    $("#sortable1, #sortable2, #sortable3").disableSelection();
});

Answer 1

要防止将任何其他项目放入sortable3，请在超出最大数量时取消删除。

下面的代码是您当前的代码，我只添加了将接收到的事件附加到第三个可排序的最后一个方法。

$(function() {
    $("ul.droptrue").sortable({
        connectWith: "ul",
    });

    $("ul.dropfalse").sortable({
        connectWith: "ul",
        dropOnEmpty: false
    });

    $("#sortable1, #sortable2, #sortable3").disableSelection();

    $("#sortable3").on("sortreceive", function(event, ui) {
        var $list = $(this);

        if ($list.children().length > 1) {
            $(ui.sender).sortable('cancel');
        }
    });
});

jQuery拖放 - 只允许列表中的一个项目

1 个答案:

DEMO