search

Shopify / draggable

The JavaScript Drag & Drop library your grandparents warned you about.
https://shopify.github.io/draggable
MIT License
17.96k stars 1.09k forks source link

Sortable - ability to reset children to positions pre-sort? #251

Open chrismanderson opened 6 years ago

chrismanderson commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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

arderyp commented 5 years ago

+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 commented 5 years ago

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.

OneBigOwnage commented 3 years ago

Any updates on this?