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
?
sortable-list is a custom element that allows you to sort an element from a list by dragging it.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With