Draggable: Sortable - ability to reset children to positions pre-sort?

[chrismanderson]

This library is great, and a great re-imagining of a common front end operation.

Had a feature request regarding sortable. I currently do a lot of sorting/dragging of lists and between lists of objects. When the sort finishes, I often trigger an API call representing the current state of the sort to store the new order of the objects.

Now, sometimes that API call can return an error, or some case saying "hey, I know you wanted to sort it this way, but you really can't". In that case, I want to revert the sorted elements back to their original position.

I originally tried to fire evt.cancel() within the sortable:stop event, but it doesn't look like that event supports cancel. And the sortable:sort event would trigger the API call too soon.

If there is a way to do this currently? If not, consider this a feature request for something like a evt.resetPositions().

[beefchimi]

Hey @chrismanderson !

Sorry for the trouble. It _sounds_ like you could do something similar to what we are doing in the Multiple Containers example.

Please take a look here and let us know if that gets you closer to a solution.

cc/ @tsov in case you have other ideas.

[chrismanderson]

This gets me closer for sure, but isn't quite a solution yet. The trouble as I see it is that the sortable:sort call is triggered every time I'm dragging over the container and moving the positions of the new items. If I move my API call there, it'll get fired much too often. The flow I'm looking to see if I can achieve with this library is:

1. Click/hold an element and start to drag.
2. Position it into its new slot in the list, and drop it.
3. Update the UI to show the new position.
4. Trigger an API call with the new position.
5. If the API call fails or returns an error state, re-position the element into its original position, effectively cancelling the drag.

[tsov]

Right, that makes sense to me! Events can't be canceled asynchronously, so there is no way to do this with events atm. We were planning to add a Sortable#revert method, which would allow you to revert the last re-order actions.

I am guessing this would solve your problems?

[chrismanderson]

Yeah, I believe that'd work great. I'll keep an eye out for that method!

[arderyp]

+1 for Sortable#revert, that would be awesome. Thanks for the amazing tool! @tsov, is there an issue of that feature that I and other can track so we are notified when it is complete?

[douglasjunior]

This gets me closer for sure, but isn't quite a solution yet. The trouble as I see it is that the sortable:sort call is triggered every time I'm dragging over the container and moving the positions of the new items. If I move my API call there, it'll get fired much too often. The flow I'm looking to see if I can achieve with this library is:

1. Click/hold an element and start to drag.
2. Position it into its new slot in the list, and drop it.
3. Update the UI to show the new position.
4. Trigger an API call with the new position.
5. If the API call fails or returns an error state, re-position the element into its original position, effectively cancelling the drag.

Yeah, we need this behaviour too.

We are using React, so today we are destroying the Sortable, resetting the elements positions using React and then, creating the Sortable again.