空容器/列表上的jQuery UI拖放不工作

我对jQueryUISortable小部件有一个问题。我简直不能把任何东西放在空容器上。当容器中有一个项目时，它可以完美地工作。 我这样称呼这个小部件：

$(".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());
    }
});

搜索发现连接的列表/容器需要padding/min height，以便jQuery能够正确计算位置

但是连接的div“.apc_列--content”有一个最小高度和一个填充。我还测试了在容器上放置一个带有“display:none”的项目，但没有帮助

我只是不能让它工作（测试所有浏览器），并将非常感谢任何帮助

多谢各位

编辑：为该问题制作了JSFIDLE：

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

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

---

您可以向空ul添加一个不可见的空ul来解决此问题^_^

ul为空后，仔细检查ul的宽度，当ul为空时，没有宽度，因此，您不能在其上放置li。您可以通过应用边框来检查ul的宽度。 解决方案仅适用于您的所有ul，问题将得到解决。

---

例如：.droptrue{width:100%}（.droptrue是我的ul）

您只需将这些css添加到

ul

元素中即可

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

---

您需要在

ul

元素中添加一个填充物

您可以制作一个js fidddle吗？JSFIDDDLE:非常感谢！事实上，我测试了几次，但似乎我在错误的视图中调用了它（使用主干网），并且容器“apc_column--content”当时没有呈现。谢谢：）

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