jQuery: draggable item added to a sortable list

Question

Hello,

I have a sortable list and a draggable div:

<div id="draggable">Add Item</div>

<ul id="sortable">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ul>

#sortable is already a .sortable(). I should be able to "drag" another item between any of the list items (first, middle, last).

How do I go about this?

Any reply would be greatly appreciated.

Thanks!

Answer 1

You need to set the option connectToSortable in the draggable options.

ie:

$('#draggable').draggable({ connectToSortable: 'ul#sortable' });

See the docs for more info