空容器/列表上的 jQuery UI 拖放不起作用答案

【问题标题】：jQuery UI drop on empty container/list not working空容器/列表上的 jQuery UI 拖放不起作用
【发布时间】：2013-08-10 16:02:21
【问题描述】：

我的 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”的项目，但这没有帮助。

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

谢谢。

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

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

【问题讨论】：

你能做一个js小提琴吗？
jsFiddle: jsfiddle.net/Sf5QW/1

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

WORKING FIDDLE

基本上，您在错误的元素上设置了可排序。我将它更改为 .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());
            }
});

【讨论】：

非常感谢！实际上我测试了几次，但似乎我在错误的视图中调用它（使用主干）并且容器'apc_column--content'当时没有呈现。谢谢:)

【解决方案2】：

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

【讨论】：

【解决方案3】：

在 ul 为空后仔细检查 ul 的宽度当你的 ul 为空时，没有宽度，因此，你不能将 li 放在它上面。您可以通过应用边框来检查 ul 的宽度。该解决方案仅将宽度应用于您的所有 ul，问题将得到排序。例如：.droptrue{width: 100%}（.droptrue 是我的 ul）

【讨论】：

【解决方案4】：

您可以将这些 css 添加到 ul 元素中

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

您需要为ul 元素添加填充

【讨论】：