Add option for reverting DOM modifications

[roy-mdr]

This option allows to use Sortable.js with any framework that handles the DOM manipulation by state (React, Vue, Svelte...). Toggling the option 'revertDOM' to 'true' will let you handle your own state manipulation by the Sortable events (onAdd, onSort...). Now the events also receive the Sortable object, allowing access to the 'to' and 'from' group names and other properties.

This PR mainly solves: #546 #1931 #1856 #1874 And probably solves: #2024 #837 #781

I get it...

I get that the main purpose of Sortable.js is for DOM manipulation (addressed on mostly all issues tagged). However I enjoy a lot the workflow using Sortable and as far I can see a lot of people opening similar issues too.

So this is an attempt to implement the feature in a little less hacky way (or as hacky but built in the library) to unlock the usability of Sortable in this kind of data/state driven frameworks without framework-targeted alternatives.

This is not fully tested

I only tested slightly in Svelte and with MultiDrag Plugin. I would love the community to test on its own use cases and suggest changes. Mainly create a discussion beyond just saying Sortable is not meant for this.

Thanks a lot for maintaining Sortable alive! I will post a Svelte example in the first comment.

Known issues

• MultiDrag BUG: Due to bug #2203 , sorting on a certain way won't fire the onSort event, hence breaking the state-DOM coherence, hence breaking the whole Sortable container state.
• MultiDrag BUG (Svelte only): dragging and dropping before folding-animation ends will only move the draggingEl and leave behind all other elements. Temporal solution: take the dropped index and count from there to insert to the other array.

[roy-mdr]

Svelte demo

No plugins

REPL: https://svelte.dev/repl/e137f85c1048463291a1cda75367f209?version=3.50.1

Multidrag Plugin

REPL: https://svelte.dev/repl/5bb1702a3497432f82d913471e8e78c3?version=3.50.1

[DelfsEngineering]

This would be very useful for cases where the DOM is generated dynamically ( from schema for example). There are times when v-draggable I (for Vue) is not usable and SortableJS is needed. But issues with post-updating schema after the DOM has been mutated by Sortable cause reactivity to break ( element indexes etc ) and the whole DOM needs to be redrawn. This PR seems like it would solve this by letting the schema update the DOM as It should.

[busti]

This is indeed very useful.
I was able to integrate this with our web framework outwatch in very few lines of code.

It there is anything I can do to speed up merging this please tell me.

[Ekleog]

Thank you for the PR! I hope it'll be merged for the next SortableJS release, as soon as possible :)

FWIW, I'm writing bindings to easily use SortableJS from Rust. Rust WASM in-browser is mostly framework-based, and these frameworks basically wouldn't work alongside SortableJS without this PR. So I'm making the bindings use a patched version of SortableJS with this PR: https://crates.io/crates/sortable-js

Hopefully I can remove this hack and revert to the upstream version on the next release!

[pvthuyen]

Do we plan to merge this?

[Ben-Avrahami]

is this PR going to be merged? im in need of this feature and im sure itll be great for others.