可排序不适用于不同高度的列

Question

我正在使用这个库：HTML5 Sortable Drag and Drop。

我将它用于块，2 列宽。它的标记：

<ul class="sortable grid">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li style="height: 200px;">Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li style="height: 200px;">Item 7</li>
    <li>Item 8</li>
</ul>

我有一个问题。当某些块有不同的高度时，我需要以某种方式清除第二个块之后的float，以免弄乱布局。

这里有一个现场工作演示http://jsfiddle.net/jasondavis/4njSE/6/，如果有人有任何想法。我尝试使用 Odd li 列表项上的选择器执行 .sortable>:nth-child(odd) {clear:left}，这在外观上很明智，但它会破坏拖放的功能，当您放下项目时，它们不会进入正确的位置这样做。

此 JSFiddle 显示它与添加的 .sortable>:nth-child(odd) {clear:left} 一起使用 http://jsfiddle.net/jasondavis/4njSE/7/

还有什么想法？我现在很茫然。

我还尝试将每组 2 个块包装在自己的容器中，这会有所帮助，但是由于库将 dragable 添加到容器 div 中，因此拖放无法正常工作。

这是目标的图像，它的外观：

Answer 1

我们开始吧：

首先 - working jsfiddle example。

基本上，我在插件中添加了两个事件回调：onStartDrag 和 onEndDrag。它们依次调用addFloats 函数，这是一个简单的函数，负责将浮点数添加到不是 sortable-dragging 元素的奇数元素（这不能用纯CSS 实现）。我们还必须在调用可排序插件时调用该函数，但仅此而已。

享受:)

Answer 2

添加这个 CSS：

.sortable>:nth-child(odd) {clear:left}