各种高度的jQuery可排序块

Question

我正在尝试使用JQuery .sortable()制作具有各种高度的可排序块。

但是，如果您尝试将大块向右移动，则小盒子之一将移至底部，并留出空白。

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

我了解发生这种情况的原因以及float工作原理，但找不到解决方法。

jsFiddle示例

更新： 这是我正在尝试做的完整图片。 我想要的是能够仅使用6种尺寸的宽度，可调整高度的高度和可排序项目从空白页创建此结构。

Answer 1

现在的作品，我最初有一个几乎可以正常工作的模型，在短物件周围使用了第二个环绕div 。 该错误存在于我的FF Win 7中（在IE9中似乎还可以），该错误在大块和成组的块之间出现了微小的高度差，因此较低的浮点在左上角“命中”（如果是大块）并且不走。 当我查看Firebug时，FF显示的计算出的边框不是1px，而是0.916667px，所以我不知道这是否是问题（下面已修复）。

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

编辑--Firefox已修复 ：我保留了短支架边框，但将其设置为透明（因此它的计算结果与double height框相同），然后使用元素内部的相对位置进行调整，并且现在在FF中对我有效： 编辑：改进的版本（第4列） http://jsfiddle.net/tnLcg/99/ 。

Answer 2

您可以尝试使用jQuery Masonry进行这种布局（如果我理解正确的话）。

Answer 3

如果希望两个半部能够独立移动 ，请将它们分成两列，然后使用connectWith选项使它们在两个半部之间可拖动：

http://jsfiddle.net/ujahd/

如果您希望两半保持在一起 ，则将它们分成一个div：

http://jsfiddle.net/W5VzD/1/

Answer 4

如果您有兴趣阅读本教程，也可以找到本教程。 希望你找到答案。

编辑：虽然不是jQuery的。