可排序不使用不同高度的列

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 .sortable>:nth-child(odd) {clear:left}列表项上的选择器li进行操作，并且这看起来非常明显，但它会拖拽拖放的功能，当您丢弃项目时，它们不会进入我这样做时的正确位置。

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

想法？我现在不知所措。

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

这是目标的图像，它应该是什么样子：

Answer 1

我们走了：

首先 - working jsfiddle example。

基本上，我已经为插件添加了两个事件回调：onStartDrag和onEndDrag。这些又调用addFloats函数，这是一个简单的函数，它负责向不 sortable-dragging元素的奇数元素添加浮点数（这不能用纯CSS）。我们还必须在调用可排序插件时调用该函数，但这就是它。

享受：）

Answer 2

添加此CSS：

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