Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 245
Martti Laine Avatar asked Dec 04 '11 18:12

Martti Laine


People also ask

What is a sortable list?

sortable-list is a custom element that allows you to sort an element from a list by dragging it.

How does Javascript sortable work?

SortableJS allows your users to reorder items in an unordered list, giving users a visual dimension to specific actions and modifications. Sortable JS is a Javascript library that enables you to sort lists by dragging and dropping list items.

What is UI sortable?

jQueryUI sortable() method is used to re-order elements in the list or grid form, by using the mouse. The sorting ability of this method is based on an operation string passed as the first parameter.


1 Answers

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
like image 193
Martti Laine Avatar answered Sep 20 '22 18:09

Martti Laine