SortableJS / react-sortablejs

React bindings for SortableJS
http://sortablejs.github.io/react-sortablejs/
MIT License
2.05k stars 209 forks source link

[question] Can't get original sorted state on dragging end #142

Open antoine-nedelec opened 4 years ago

antoine-nedelec commented 4 years ago

I would like to retrieve the final state of my draggable list, only on drag end.

I managed to call my own function like this, setList={() => {}} onEnd={this.props.onBundleDragAndDrop}

But I need here to check if my indexes are different, and then splice my state element twice (once to remove, and once to insert). But even when I do this, there is a "chosen" attribute inserted in my original state

So I need then to clean my state out of the "chosen" attribute.

As I customly find the end index, and then I customly clean my response, this library don't really do what I need, but isn't it supposed just to sort element and return the final state ? Can I get rid of those new indexes inserted in my state, and is there another way just to retrieve it on drag end without tweaking "setList" ?

antoine-nedelec commented 4 years ago

For some context, I sync some JSON files with dropbox only when a list is updated. So I mustn't update dropbox if order didn't changed, and I also can't insert new indexes into those files.

waynevanson commented 4 years ago

Check out what each on[Xxxx] event reacts to. Sounds like you're looking for onUpdated https://github.com/SortableJS/Sortable.

onUpdate on fires when the the list changes after a drop.

antoine-nedelec commented 4 years ago

onEnd work as fine as onUpdate, it doesn't seems possible but I wanted to retrieve my original prop list I gave as an input, without any new attribute inserted inside..

In the end I had to do this: onEnd={this.onBundleDragAndDrop} list={this.props.bundles.map(bundle => [bundle.id])} (not passing the original prop states as a list because it's inserting new index values inside if I do) setList={() => {}} (disabling the associated update event)

and my function:

onBundleDragAndDrop = (evt) => {
    if(evt.oldIndex !== evt.newIndex) {
        let bundles = [...this.props.bundles];
        bundles.splice(evt.newIndex, 0, bundles.splice(evt.oldIndex, 1)[0]);
        // do what I need with my updated clean list
    }   
}

It's just that I loose almost all the interesting features of this library..