各种高度的jquery可排序块

Question

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

但如果你试图将大块移到右边，那么一个小盒子会移到底部并留下空白处。

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

我理解为什么会发生以及float如何运作但我找不到解决方法。

jsFiddle sample

更新 Here是我正在尝试做的完整画面。我想要的只是能够使用6种尺寸的宽度，可调整大小的高度和可排序项目从空白页面创建此结构。

Answer 1

现在有效我原来有一个几乎工作模型，在短项目周围使用第二个包裹div。这个bug出现在我的FF Win 7中（在IE9中似乎没问题），它看到了大块和块组之间的高度差异，所以较低的浮动“点击”一个到左上角（如果它是一个大块）并且不会离开。当我查看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/。

Answer 2

你可以试试jQuery Masonry这种布局（如果我理解你的问题的话）。

Answer 3

如果你想让两个部分能够独立移动，将它们分成2列，然后使用connectWith选项使它们在两者之间可以拖动：

http://jsfiddle.net/ujahd/

如果您希望两半保持组合，请将它们分组为一个div：

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

Answer 4

如果您有兴趣阅读它，还有this教程。希望你找到答案。

编辑：虽然不是jquery。