Sortable: Simulating a sortable move from javascript

[bnadji]

Problem:

Is there a way to simulate a sortable item move from javascript? I have an app
that presents a list of sortable options to the user, but I want to visually animate a shuffle move for the user before the user makes a selection.

[userabuser]

See docs here in primary README.md

In particular you will want the sort and save methods as well as potentially utilizing the store property on the options object when initializing an instance of Sortable:

var order = sortable.toArray();
sortable.sort(order.reverse()); // apply

Methods

• https://github.com/SortableJS/Sortable#method
  
  
  
  • https://github.com/SortableJS/Sortable#sortorderstring
  
  
  • https://github.com/SortableJS/Sortable#save
  
  

Store Options

• https://github.com/SortableJS/Sortable#store

[bnadji]

Thank you for the quick response. The proposed approach did allow for shuffling the sortable items but the shuffling was instantaneous and not animated (i.e., did not simulate a user shuffling the rows). It also did not trigger the onEnd event with the right old and new Indices (oldIndex, newIndex) which I needed to manage internal data structures.

I ended up doing the animation with standard JS transitions and managed the data structures manually in the code.

It sounds like a method like sortable.elementSwap(old, new) which takes two sortable indices and swaps the corresponding elements with animation ( as if the user has swapped them manually) and then triggers the appropriate events, such as onEnd, would be a useful addition. Given the popularity of web-based games, this opens up a whole new set of dynamic use cases for Sortable.

Thank you for your help.

[owen-m1]

@bnadji Could you describe an example of such a use case?

[bnadji]

There are several card games that can benefit from this.

Another example is the memory game of matching two similar cards or pictures in a matrix (known as the Memory game). In this game, one can do the initial shuffling in front of the user's eye and give him a minute to look at it before hiding the cards or pictures.

Another example would be a game where a user is supposed to line up a list of answers with a list of corresponding questions. Initially, the answer list can be shuffled to scramble the answers using the proposed elementSwap() method. The game can also provide a HINT button that when pressed, will use elementSwap() to automatically animate one of the answers to the correct position and then disables it so the user has fewer choices to deal with.

While the animation is never an absolute necessity, I have noticed that a smooth and well-behaved one, like the ones that Sortable 1.10 provides is extremely pleasing to the user and increases usage.

Thanks again for the fine product, especially the new 1.10 release.

[owen-m1]

@bnadji I have been thinking hard about whether or not to release the animation component of SortableJS as a separate package that could be used independent of Sortable. Basically it would provide a way of "capturing" the state of an element or all the children of an element. Then you could change the elements in any way you want, and call an animate function which would animate the elements to their new state over a specified duration of time. This way you could do what you have proposed simply by calling capture, changing the position of the card elements, and then calling animate.

What do you think of this?

[bnadji]

Thanks @owen-m1. This seems to capture what we were discussing. I assume the relevant events will fire as well since that's the key requirement for the user to manage his/her app.

I do not know much about the inner workings of Sortable to make the following comment, but it makes more sense to me to have the animate method that you proposed as part of the main package, alongside the animation property that defines its speed. If the size of the main package is of concern, the skinny version that I wrote for my own version of animation took no more than 20 JS lines. I am sure that will not be the case for Sortable as you have much more housekeeping to manage and you are looking for more comprehensive functionality. But its food for thoughts ...
Regards,
Brad

[userabuser]

@bnadji glad you got it sorted in a roundabout way, I didn't take the animation into account.

I have been thinking hard about whether or not to release the animation component of SortableJS as a separate package that could be used independent of Sortable... — owen-m1

@owen-m1 I think this would be a great idea. I have a use case showing an animation of one "card" being dragged/dropped from one column to another in a kanban style project as part of a tutorial. I'm sure there would be others whereby an API native to this already great library would be a welcomed addition.

[bnadji]

By the way, I found the following package that does the DOM element shuffling and rearranging.
The animation effects are similar to what we were discussing:

http://joshwcomeau.github.io/react-flip-move/examples/#/shuffle?_k=hqtk4h

[davidjmz]

Hello! Im working in a competition platform, and I used Sortable to enable drag & drop for ordering the users in a tournament, but I have to shuffle them too to make it random sometimes. Any news on that update @owen-m1 ?

It would be nice to randomize the array and then call the animate method and have some nice animated shuffle.

Thank you!

[bnadji]

@davidjmz,
Indeed it is a lot cleaner to do the shuffle or swap in Sortable.

The problem I found with using other packages to do the shuffling, like Shuffle.js on Github, is that in addition to their extra overhead, they do not physically shuffle the DOM elements and just transform their position on the screen. There is a whole series of DOM cleanup that you need to do after Shuffle.js is done, like physically moving the DOM elements to their corresponding screen position and removing all the extra style attributes and event handlers that Shuffle.js adds to the elements.

If you are using Sortable already for other screen manipulations, Sortable is in a much better position to also do the shuffle or swap moves, especially since most of the animation code that does the correct and clean DOM manipulation is already built-in toSortable .

Brad
@bnadji

CC: @owen-m1, @userabuser

[owen-m1]

Well I already have already tried to split out the animation code into it's own library. I can upload the code I have to GitHub within the next weeks.

[bnadji]

Great news.
Thx.

[bnadji]

@owen-m1,
Any news on the new upload with animation separated out? Thx, Brad

[bnadji]

@owen-m1, Any update on your plans on separating the animation code?

[owen-m1]

@bnadji Sorry man, life got in the way. I will upload it to npm.

[owen-m1]

@bnadji @davidjmz @userabuser Ok, I published it on NPM: https://www.npmjs.com/package/animatum
Sorry about the delay.
If you find any issues, please open them on the github: https://github.com/owen-m1/Animatum