CODEWITHSUNDEEP
jquerydraggablejquery-ui-sortablecss
Daniel F. Dietzel
Daniel F. Dietzel

Reputation: 147

How do I stop List Items from jumping when using inline-block with JQuery draggable?

Just discovered the joys of JQuery's "draggable" API, but I want to display my list using inline-block. This makes the list items jump when you drag them, does anyone know how to fix this?

The code I'm using is:

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

http://jsfiddle.net/VVaqu/

Upvotes: 4

Views: 1452

Answers (2)

shane
shane

Reputation: 109

Another solution if you can't use float:

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

The vertical-align:top is important.

Upvotes: 6

Roko C. Buljan
Roko C. Buljan

Reputation: 206699

Fiddle demo

Just add : float:left; to your li elements

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

Upvotes: 3

Related Questions