Sortable not working with different height columns

Question

I am working with this library: HTML5 Sortable Drag and Drop.

I am using it for blocks, 2 columns wide. The markup for it:

<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>

I am having an issue though. When certain blocks have different heights, I need to somehow clear the float after the 2nd block so that it does not mess up the layout.

There is a live working demo here http://jsfiddle.net/jasondavis/4njSE/6/ , if anyone has any ideas. I have tried doing .sortable>:nth-child(odd) {clear:left} with the selector on the Odd li list items and this works appearance wise, but it messes up the functionality of the drag and drop, when you drop items they will not go into the correct position when I do that.

This JSFiddle shows it working with the .sortable>:nth-child(odd) {clear:left} added http://jsfiddle.net/jasondavis/4njSE/7/

And ideas? I am at a loss right now.

I have also tried wrapping every set of 2 blocks inside there own container which helps but then the drag and drop does not work correctly as the library adds a dragable to the container divs.

This is an image of the goal, of how it should look:

Answer 1

Here we go:

First - the working jsfiddle example.

Basically, I've added two event callbacks to the plugin: onStartDrag and onEndDrag. These in turn call the addFloats function, a simple function that takes care of adding floats to odd elements that aren't the sortable-dragging element (This can't be achieved with pure CSS). We also had to call that function when calling the sortable plugin, but that's about it.

Enjoy :)