javascript - 具有各种高度的 jquery 可排序 block

Question

我正在尝试使用 JQuery .sortable() 制作具有不同高度的可排序 block 。

但是，如果您尝试将大方 block 向右移动，那么其中一个小方 block 会移动到底部并留下空白。

当我将 float: right 设置为父 div 而不是 float: left 时，我无法正确地将大块拖动到左侧。

我明白为什么会发生这种情况以及 float 的工作原理，但我找不到解决方法。

jsFiddle sample

更新: Here是我正在尝试做的事情的完整图片。我想要的只是能够从空白页面创建此结构，仅使用 6 种宽度尺寸、可调整高度和可排序元素。

Answer 1

现在可用 我最初有一个 almost 工作模型，使用第二个包装 div 围绕短元素。该错误出现在我的 FF Win 7(在 IE9 中似乎没问题)，它看到大块和 block 组之间存在轻微的高度差异，因此较低的 float “命中”左上角(如果它是大块)并且不会向左走。当我查看 Firebug 时，FF 显示计算 边框不是 1px，而是 0.916667px，所以我不知道这是否是问题所在(现在已在下面修复)。

参见 http://jsfiddle.net/tnLcg/47/ .我最初启用了在空头持有者之间进行排序的功能，但我认为正确的功能是将这样的举动变成互换。也许http://www.eslinstructor.net/demo/swappable/swappable_home.html可能会实现以在空头持有者堆栈之间工作。

编辑——Firefox 已修复:我保留了短支架边框但将其设置为透明(因此它的计算结果与双高框相同)然后使用内部元素的相对定位来调整它现在在 FF 中对我有效:编辑:改进版本(4 列) http://jsfiddle.net/tnLcg/99/ .