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

Question

我有一个主列表 .sortable 和 3 个或更多连接的其他列表，我希望有人可以拖放一个项目，这样效果很好而且很简单。但我希望能够将新列表限制为 1 个项目，如果他们改变主意并拖动一个新项目，他们也可以将该项目拖回来。

到目前为止我所拥有的示例: http://jsfiddle.net/TQqdF/25/

Answer 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');
            }
        }
    });

http://jsfiddle.net/TQqdF/62/

[根据约翰有用且正确的评论进行更新!]

[更新:如果这不是一回事，那就是另一回事了!现在看来没有办法避免动画(您设置的revert: true)。但是，对于评论线程中进一步提到的问题，我有一个部分解决方案。

如果您在相对定位的 UL 中使用绝对定位的 LI 元素，则添加的新项目不会将其他项目推开。但是，您确实需要显式声明这些相同的 LI 项目在可拖动容器内时是静态定位的。这是我放在现有代码底部的 CSS:

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

还有一把 fiddle :http://jsfiddle.net/w38dK/5/

所以，剩下的主要事情是它在被拒绝和恢复之前动画化。我翻阅了文档，但找不到解决该问题的方法。也许 Stack Overflow 上的第二个问题专门与该问题有关？