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

我有一个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/

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

Answer 1

工作时尚

基本上，您在错误的元素上设置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中添加一个空的隐形

来解决这个问题。 ^ _ ^