Skip to content
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

Add option for reverting DOM modifications #2195

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

roy-mdr
Copy link

@roy-mdr roy-mdr commented Aug 30, 2022

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 [bug] MultiDrag Plugin: onSort event not fired on certain interaction #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.

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.
@roy-mdr
Copy link
Author

roy-mdr commented Aug 30, 2022

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
Copy link

DelfsEngineering commented Sep 3, 2022

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
Copy link

busti commented Nov 23, 2022

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 added a commit to Ekleog/sortable-js-rs that referenced this pull request Nov 30, 2022
This is basically adding PR
SortableJS/Sortable#2195 to the SortableJS
version we're using
@Ekleog
Copy link

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
Copy link

Do we plan to merge this?

@Ben-Avrahami
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants