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/

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

[更新：如果不是一件事就是另一件事！现在似乎没有办法避免动画（你设置的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');
    });
});

Full jsfiddle在这里：http://jsfiddle.net/P9bS8/

Answer 3

这是我的版本：http://jsfiddle.net/DwXnV/3

拖动的项目替换目标列表的内容。替换项目移动到原始列表。假设每个目标列表只能包含1个项目。

Answer 4

您需要使用接收事件，并确保忽略main_list，以便您可以放回物品。

 $('#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');
                }
            }
        }
    });

检查jqueryui sortable

上的事件部分

http://jsfiddle.net/TQqdF/61/

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

4 个答案: