How to stop list items when jumping when using inline block with drag and drop jQuery?

Question

The joy of the jQuery drag-and-drop API just opened up, but I want to display my list using the built-in block. This makes the list items jump when you drag them, does anyone know how to fix this?

The code I use is:

$(function() { $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection(); });​ 

http://jsfiddle.net/VVaqu/

Answer 1

Demo screenshot

Just add: float:left; to your li elements

 #sortable1 li, #sortable2 li { float:left; /*other styles...*/ } 

Answer 2

Another solution if you cannot use float:

 #sortable1 li, #sortable2 li{ display: inline-block; vertical-align: top; } 

Vertical alignment is important: top.