-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Add option for reverting DOM modifications #2195
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
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.
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
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.
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.
This is basically adding PR SortableJS/Sortable#2195 to the SortableJS version we're using
Ekleog
commented
Nov 30, 2022
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
commented
Jun 27, 2023
Do we plan to merge this?
Ben-Avrahami
commented
Aug 13, 2023
is this PR going to be merged? im in need of this feature and im sure itll be great for others.
Uh oh!
There was an error while loading. Please reload this page.
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