jQuery拖放-列表中仅允许一项 [英] jQuery drag and drop - Allow only one item in list

问题描述

我在 jQuery UI Sortable

I work with this example from jQuery UI Sortable

我在拖放时遇到问题.
表号3-sortable3应该只能接收一项.

I have a problem with drag and drop.
Table number 3 - sortable3 should only be able to receive one item.

这是我的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();
});​

推荐答案

为防止任何其他项目落入sortable3中，如果已超过最大数目，请取消放置.

To prevent any additional items from being dropped into sortable3, cancel the drop if the maximum number has been exceeded.

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

The code below is your current code, I only added the last method which attaches the received event to the third sortable.

$(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拖放-列表中仅允许一项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！