SortableJS / react-sortablejs

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

Movement between different #268

Open weiblank opened 1 year ago

weiblank commented 1 year ago

When group A moves to group B, how do I determine the execution sequence of onRemove and onAdd

vaynevayne commented 1 year ago

+1, Multiple setlists are required, and they are difficult to work with

const list1 = useMemo((=>rawList.filtter(o=> o.age>5),   [rawList]))
const list2 = useMemo((=>rawList.filtter(o=> o.age<5),   [rawList]))

const setList1 =>(val)=> setRawList(...doSomeThing)
const setList2 => val=> setRawList(...doSomeThing)

<ReactSortable list={list1} setList={setList1} group='group'/>
<ReactSortable list={list2} setList={setList2} group='group'/>

above code is not work

makis-x commented 10 months ago

This works really well actually. You just need to compare the new list length vs the state list to see if something was removed or added. I used lodash differenceBy to get what was added and removed