jQuery sortable - 尝试排序时div折叠

Question

我有一个用户可以添加和删除的列表 - 该列表的长度可以是任意大小。

我正在尝试将jQuery sortable 添加到列表中。该列表应该只允许对自定义详细信息进行排序。当用户将鼠标悬停在自定义详细信息上时，它们将显示为橙色。

但是，当我尝试拖动/排序自定义详细信息时，列表会折叠到零高度，从而无法进行排序。

我已经在这个问题上工作了几个小时，尝试了很多东西，搜索了 SO 和 Google - 都失败了。

当列表高度是动态的并且仍然完成排序时，如何显示可排序列表？

这是我遇到的问题的jsfiddle。

这里是可能存在高度问题的相关HTML代码（其余代码在JSFiddle中）：

<div class="live_preview_contents_display1" style="background: teal; overflow: auto;">

Answer 1

尝试更新的fiddle，其中ul 类sortable 没有div 作为子级。这就是sortable 不起作用的原因。