Sortable: Programmatically move an element (and trigger FLIP animation)

Created on 2 Nov 2020  路  4Comments  路  Source: SortableJS/Sortable

_PLEASE READ THE CONTRIBUTION GUIDELINES HERE!_

_Failure to comply may have your issue automatically closed._

Summary

Please answer the following questions in sentences.

  • What is the feature?

There should be a way to programmatically move a single element in the array in a way that triggers the animations. SortableJS has great FLIP animation functionality that happens while dragging. It also has a .sort() function which allows you to sort the elements, but it does not animate. I realize that it would a lot to coordinate animation during .sort() (although that would be nice). But I'm guessing that it would/should be easy to move a single item from one place in the list to another in a way that triggers the animation.

  • Why is having this feature important to you?

I'm working on an Electron application which offers menu items to move elements. But the "jumping" items is bad UX. If I can't do this with Sortable, I'll need to add another library to my project to get this type of functionality.

  • Who else will find having this feature helpful?

Anyone who wants to use SortableJS in a complex UI with more accessible ways of "dragging" elements (perhaps for those with mobility issues).

feature

Most helpful comment

Hello Googlers! If you're stumbling across this while searching for Sortable FLIP or similar, it appears that this is now accomplished through the useAnimation boolean argument of the .sort() function:

sortable.sort(order.reverse(), true)

Thanks @owen-m1!

All 4 comments

I actually in need of this feature too. Recently, I have been trying to find a way to programmatically move an item to another list for some auto movement feature I'm trying to build. Pretty sad to find out you there's not such way to do that.

It seems like the main reason to add this feature is for accessibility. This could provide animated fallbacks for javascript (probably keyboard event) manipulation of the list.

See also #1951 which references #1176.

Added

Hello Googlers! If you're stumbling across this while searching for Sortable FLIP or similar, it appears that this is now accomplished through the useAnimation boolean argument of the .sort() function:

sortable.sort(order.reverse(), true)

Thanks @owen-m1!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kaermomo picture kaermomo  路  3Comments

kinjal-codes picture kinjal-codes  路  3Comments

kevinvanmierlo picture kevinvanmierlo  路  3Comments

irfanlone picture irfanlone  路  3Comments

dwburdick picture dwburdick  路  3Comments