Connected lists

[slmgc]

Is there a way to drag items from one list to another?

[clauderic]

Not currently. I may look into implementing a DropTarget higher order component, but that's a bit out of scope at the moment. If that's the kind of functionality you're looking for, you should perhaps try react-dnd

[slmgc]

@clauderic I was thinking about functionality similar to https://github.com/RubaXa/Sortable It allows to have connected lists. React-dnd is not the best option.

[oyeanuj]

@slmgc One way I wonder if this would work is if you fake the two separate lists as one list with a divider but I imagine that would work only for very limited cases.. Sortable library does look cool!

[nperichSYKES]

This library seems great! We use react dnd largely for firing actions when dragging between and over lists. For example, imagine dragging a school activity up and down to sort within the activity's list, or further down to drop into a different activity group, or across the screen to drop onto a group of students to assign them that activity. But a few of our lists would really benefit from react-virtualized and, from a quick glance, integrating dnd with virtualized seems like it might get ugly. I know this case is sort of what react-dnd is designed for, but I wonder how much of it can be handled with a lighter weight drop target HOC for react-sortable-hoc.

[oyeanuj]

@slmgc @nperichSYKES I'm curious where did you guys end up here? Did you end up with a solution for connected lists using this library or another?

[slmgc]

@oyeanuj I used https://github.com/RubaXa/Sortable. My implementation with connected lists is about 100 LoC.

[oyeanuj]

@slmgc Thanks! Possible to share a gist of that implementation to get a sense of how it works?

[slmgc]

@oyeanuj I'm currently working on another project, but I'll try to find my implementation

[jasonhargrove]

So close, but without this feature, so far. Great job all around though, thanks!

[oyeanuj]

@slmgc Any luck/update on finding that implementation? Appreciate you looking!

[slmgc]

@oyeanuj sorry, had no spare time at work. I'll try to do it this weekend.

[ghost]

This would be a great feature. Currently our app requires this and is using this module at present. Any update on this? Great work so far!

[jdbence]

I have a basic working version that uses two vertical lists. It has one additional class to handle the swap logic and zero code changes to the current react-sortable-hoc classes.

[oyeanuj]

@jdbence That looks smooth, I am very curious about your approach. I have a somewhat working version as well which requires using two different collections and then returns the new collection as well as index at the drop place.

Do you have a branch/fork where I can look at your implementation? And/or a PR coming up for this?

[jdbence]

@oyeanuj It will come as a PR in the next week or so. This implementation uses a callback returning old and new list information (index & list) of the dragged item. Events are handled on move and on drop.

[jdbence]

You can checkout the PR #138 I haven't tested on touch devices.

[romellogoodman]

For those waiting on this, you should also check out react-beautiful-dnd. They seem pretty close to implementing this feature

[romellogoodman]

This just landed in react-beautiful-dnd

[sbrichardson]

I put together some code from a few users that I started working on, and adding some other features:

https://github.com/reactual/react-multi-sortable-hoc-demo

[c0d3-ninja]

@clauderic is this feature in progress?

[marcomelilli]

Any news?