Jquery ui可排序限制最多1个项目

Question

我有一个主列表.sortable和3个或更多其他列表连接,我希望一个人拖动一个项目,并删除哪个很好,很容易.但我希望能够将新列表限制为1个项目,如果他们改变主意并拖动新项目,他们也可以拖回该项目.

我到目前为止的例子:http: //jsfiddle.net/TQqdF/25/

Answer 1

在receive选项中,运行一些逻辑,然后在ui.sender实用程序对象上调用'cancel':

$('#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元素,则添加的新项目不会将其他元素排除在外.但是,您需要在draggables容器内明确声明这些相同的LI项是静态定位的.这是我在现有代码底部抛出的CSS:

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

还有一个小提琴:http://jsfiddle.net/w38dK/5/

所以,剩下的主要是它在被拒绝和恢复之前动画.我在文档周围戳了一下,我找不到解决问题的方法.也许关于Stack Overflow的第二个问题专门针对这个问题？

Answer 2

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

我没有使用接收事件,而是在列表项上使用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');
    });
});

完整的jsfiddle在这里:http://jsfiddle.net/P9bS8/