Jquery ui可排序限制最大为1项

我有一个主列表。可排序列表和3个或更多其他连接的列表，我希望一个人拖放一个项目，这很好，很容易。但我希望能够将新列表限制为1个项目，如果他们改变主意并拖动一个新项目，他们也可以将该项目拖回

目前为止，我所拥有的示例：

---

在接收选项中，运行一些逻辑，然后在ui.sender实用程序对象上调用“取消”：

$('#main_list,ul').sortable({
        placeholder: 'placeholder',
        connectWith: '.connect_lists',
        receive: function(event, ui) {
            var $this = $(this);
            if ($this.children('li').length > 1 && $this.attr('id') != "main_list") {
                console.log('Only one per list!');
                $(ui.sender).sortable('cancel');
            }
        }
    });

[根据John有用且正确的评论进行更新！]

[更新：如果不是一件事，那就是另一件事！现在似乎没有办法避免您设置的动画（

revert:true

）。但是，对于评论线程中进一步提到的问题，我有一个部分解决方案

如果在相对定位的UL中使用绝对定位的LI元素，则添加的新项不会将其他项推开。但是，您确实需要明确声明，当在Dragables容器中时，这些LI项是静态定位的。以下是我在现有代码底部抛出的CSS：

#droppables ul { position: relative; }
#droppables li { position: absolute; top: 3px; left: 3px; }
#draggables li { position: static; }

还有小提琴：

---

因此，剩下的主要问题是，它在被拒绝和恢复之前会进行动画处理。我在文档中翻了一番，找不到解决方法。可能还有第二个关于堆栈溢出的问题专门针对这个问题？

您需要使用receive事件，并确保忽略

主列表

，以便可以放置项b阿克

 $('#main_list,ul').sortable({
        placeholder:'placeholder',
        connectWith: '.connect_lists',
        receive: function(event, ui) {
            var list = $(this);
            if (list.attr('id') != "main_list") {
                if (list.children().length > 1) {
                    alert("More than 1!");
                    // move item back to main_list
                    $(ui.sender).sortable('cancel');
                }
            }
        }
    });

查看上的“事件”部分

以下是我的版本：

拖动的项替换目标列表的内容。替换的项将移动到原始列表。

---

假设每个目标列表只能包含1项。

如果有人仍然感兴趣，我采取了稍微不同的方法来解决这个问题

我没有使用receive事件，而是在列表项上使用mousedown和mouseup事件来检测目标列表是否处于最大值

如果目标列表已满，这实际上会在单击时禁用它们。这意味着没有讨厌的占位符

$('.sortable li').mousedown(function() {
    $('.sortable').not($(this).parent()).each(function() {
        if ($(this).find('li').length >= 1) {
            if ($(this).attr('id') != "main_list" ) {
                $(this).sortable('disable');
            }
        }
    });
});
$('.sortable li').mouseup(function() {
    $('.sortable').each(function() {
        $(this).sortable('enable');
    });
});

---

完整的JSFIDLE在这里：

快速提问cancel到底做了什么？我试着用谷歌搜索了一下，但没有找到答案。文档中也没有太多关于它的说法。它是一种特定于jQuery UI框架及其可排序交互的方法。它所做的只是将元素还原回排序开始前的状态。它通过将“ui”对象分配到receive参数的函数中，这意味着您随后可以访问（ui.sender）中的发送者。交互的.sortable（）方法恰好有一个名为“cancel”的选项，它执行我提到的还原操作。不确定这是否回答了您的问题。-@Greg Pettit，当我试图弄清楚它时，您先到了这里。.我已经停止了

函数（事件，ui）

part so没有启动用户界面。您需要确保忽略

main\u列表，这样您就可以将项目移回该列表。具有讽刺意味的是，我没有像很多人那样急着回答问题（grr），而是在慢慢来，但我仍然错过了你正确识别为整件事所必需的主要逻辑。好的，抓住了！增加了你的答案，因为这是一个要求！嘿，在这里回答问题很有趣，我学会了如何回答这个问题：），+1对你：）虽然这理论上可以回答这个问题，包括这里是答案的关键部分，并提供链接供参考。很高兴它帮助了某人：）