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

Question

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/

score 6 · Answer 1 · answered Aug 04 '13 at 18:49

6

Another solution if you can't use float:

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

The vertical-align:top is important.

answered Aug 04 '13 at 18:49

shane

109
2
7

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

Fiddle demo

Just add : float:left; to your li elements

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 22 '12 at 00:19

Roko C. Buljan

196,159
39
305
313

Thank you so much! This works great. I'm going to try and extend this project so I can save the new positions using this: http://stackoverflow.com/questions/7097168/save-jquery-ui-sortable-positions-to-db. Do you think that will work / any tips? – Daniel F. Dietzel Nov 22 '12 at 02:02
@Roko C. Buljan, may I ask you to take a look at a jQuery draggable and droppable related question (bounty-added) here : https://stackoverflow.com/questions/54498364/jquery-drag-and-drop-simulation-does-not-work-for-the-last-draggable ? – Istiaque Ahmed Feb 06 '19 at 20:21

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

2 Answers2

Fiddle demo