Search code examples
jqueryjquery-uijquery-ui-sortabledroppable

Sortable & droppable, droppable are doesn't update, when DOM does?


I'm making a UI that involves sortables, in which there are droppable list items. Here's a fiddle of it:

http://jsfiddle.net/NRkwx/

The problem is this: when you start sorting, and move the list item around, the droppables move too, but the area that they are droppable to doesn't. You can see it by moving some list items. You'll notice, that if e.g. the droppable moves one step up, you can drop to it from its original position, not from where it actually resides.

How could I update the droppable area? Should I remove the droppable and add it on sortable change?


Solution

  • Solution found! I was going through the jQuery UI source, and found this:

    //If you have a highly dynamic page, you might try this option. It renders positions every time you move the mouse.
    if(draggable.options.refreshPositions) $.ui.ddmanager.prepareOffsets(draggable, event);
    

    Then I added this option to my sortable:

    refreshPositions: true