jQuery UI Sortable: maintain sortable-helper as list changes when dragging

Question

I have a list of elements and using jQuery UI Sortable I'm able to drag and sort the list. Now the tricky part is that this list is constantly changing. There are push requests and this list grows as you are dragging. I have everything working except when a user is dragging and new list items are added, the sortable-helper (the list item being dragged) is unable to be sorted in this realtime list. I end up with the error: "Cannot call method 'insertBefore' of null". I have tried calling $("#sortable").sortable("refresh") but that seems to have no impact on the list as you are using it.

<ul id="sortable">
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

Is there a way to maintain the sortable-helper that the user is dragging as this realtime list is updating?

Thanks!

Answer 1

When you begin dragging an item, you will need to lock the list. This can be accomplished by simply using a variable ie: var list_locked = 1; that is checked before more list items are added to the list. The mechanism that dynamically adds items to the list will need wait for list_locked = 0 before safely adding more items. The incoming items could be stored in an array. There are events that are issued by jQuery UI when the user begins dragging and when the user begins sorting a list. Use these events to know when to lock the list.