Skip to content

Improve current animation #1804

Open
Open
@Gustavodacrvi

Description

@Gustavodacrvi

You can use the "animation" property to animate items when sorting, however, I believe the animation could be greatly improved.

It would be great to have an animation where the "sortable-drag" element animates to the final position before being removed from the DOM, the current API simply removes it instantly on drag and drop.

I'm aware that it's not possible using the HTML5 drag and drop API, however, I'm sure it can be easily done with the "forceFallback" option.

You just need to know the "sortable-ghost" final X and Y position and the "sortable-drag" initial X and Y position using "getBoundingClientRect()", calculate their differences and then use transforms to animate, then proceed with "transitionend" event to fire the sortablejs onEnd and other functions.

You could use an option to turn on/off the animation, something like "fallbackOnDropAnimation", "fallbackAnimation", or simply the current "animation" option.

gif

As you can see on the example, the "Anne" element simply teleports to its final position, a smooth animation would be much better.

I can implement it myself, I just don't know where to start.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementQuality of life changes to existing features

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions