Non moving droppables in a jquery sortable

Question

I am new at coding and hope someone can help me with this.

I have a list which is pre populated from the database. The user can then move items within this list. I am using the sortable function on this list as I need the order of the items within the list. There can also be empty spots on the list that can be populated with other items.

The problem i am having is that when i move an item to this 'empty' slot, all other items move up. Here is an example

Original List:

1 - Item 1 (this is an li)
2 - Item 2 (this is an li)
3 - (this is a div)
4 - Item 3 (this is an li)

If i move Item 1 to position 3, i am able to replace the div but Item 2 moved to position 1. and Item 1 moves up to Position 2 (instead of remaining in position 3).

Is there a way i can get this to work? I can put up my code if needed.

Rgds, Mohit

Answer 1

just like this:

$('.sortable').sortable({ cancel: 'img span' });

it excludes img and span elements, but there can be any jquery expression