Question

我的jQuery UI可排序小部件有问题。我根本无法将任何物品放在空容器上。当容器有一个项目时，它完美地工作。我把这个小部件称为：

$(".apc_row--columns", this.$el).sortable({
    placeholder: 'apc_drop-placeholder-blocked',
    forcePlaceholderSize: true,
    items: '.apc_inner_item',
    connectWith: ".apc_column--content",
    tolerance: "pointer",
    handle: '.move_handle',
    helper: "clone",
    dropOnEmpty: true,
    distance: 0.5,
    stop: function(event, ui){
        that.droppedItem(ui.item, ui.item.index());
    }
});

搜索发现连接列表/容器需要填充/最小高度，因此jQuery可以正确计算位置。

但是连接的div“.apc_column - content”具有最小高度和填充。我还测试了在容器上放置“display：none”的项目，但这没有帮助。

我无法让它工作（测试所有浏览器），非常感谢任何帮助！

谢谢。

编辑：为问题做了一个小问题：http://jsfiddle.net/Sf5QW/1/

如果您将所有项目从左侧列表移动到右侧（或其他方式），则无法将任何项目移动到空列表中。

Answer 1

WORKING FIDDLE

基本上，您是在错误的元素上设置sortable。我将其更改为.apc_column - content元素，现在它可以正常工作。由于两个列表都有该类，因此我也必须将connectWith属性更改为该类。

干杯。

$(".apc_column--content").sortable({
            placeholder: 'apc_drop-placeholder-blocked',
            forcePlaceholderSize: true,
            items: '.apc_inner_item',
            connectWith: ".apc_column--content",
            tolerance: "pointer",
            dropOnEmpty: true,
            distance: 0.5,
            stop: function(event, ui){
                // that.droppedItem(ui.item, ui.item.index());
            }
});

Answer 2

你可以在空ul中添加一个空的不可见<li></li>来解决这个问题。 ^ _ ^

Answer 3

在ul空之后请仔细检查ul的宽度，并且当ul空时没有宽度，因此，您不能将li落在其上。您可以通过应用边框来检查ul的宽度。该解决方案仅将宽度应用于您的所有用户，问题将得到解决。例如：.droptrue {width：100％}（。droptrue是我的ul）

Answer 4

您只需将这些CSS添加到ul元素

padding: 5px;
background-color: #f3f3f9;

您需要为ul元素添加填充

jQuery UI放在空容器/列表上不起作用

4 个答案: