多个对话框连接/ float 问题之间的 JQueryUI 可排序

Question

问题: http://jsfiddle.net/Drath/Y9k3P/

我在连接两个对话框之间的两个 jQueryUI 可排序列表时遇到了这个问题。问题归结为 float 。如果您将 sortable 移动到它自己的对话框周围，它就可以完美运行。如果您尝试将它移动到另一个对话框，它将无法注册为“接受”可排序元素没有高度的元素，因为它的所有元素都是 float 的。

我尝试过的:

尝试使用 display:inline-block 而不是 float。这确实有效，但会使拖放移动变得非常不稳定/零星，并且会对布局造成奇怪的影响。

尝试使用所有不同的 clearfix/float 方法(强制容器大小)。这些也能正常工作，但拖放 Action 再次出现故障/零星。

尝试设置一个特定的容器高度，其效果与 clearfix 方法相同。

尝试了一百万种不同的可排序选项组合。

我愿意接受建议和可能的替代解决方案来模拟这种效果/功能。谢谢!

Answer 1

在玩了你的代码后，我终于让它工作了。

我认为这里的关键点是 #sortable1, #sortable2 选择器中的 float: left; 语句。

我还将您的 div 转换为 ul 和 li 组合。我还没有尝试过使用 div 的解决方案。

这是我的 jsJiddle 解决方案:http://jsfiddle.net/AramCH3K/5xKuh/3/

当拖动在文本前面显示一个点的元素时，我没有做太多的工作。它与克隆列表项有关，但我不知道如何设置克隆项的样式。必须有一种方法可以为其添加 list-style-type: none; 样式。

编辑:

我已经使用答案 here 更新了我的代码为了克服拖动故障。

这是我更新的 jsFiddle 解决方案:http://jsfiddle.net/AramCH3K/U6LVa/

最终编辑:

在我的updated solution我使用过克隆，我认为它提供了一种更清洁的解决方案。