Drag between multiple lists

[niftykins]

Do you have any insights (or pointers to things to change within the library) into how I'd be able to achieve dragging an item from one reorderable list into another reorderable list?

[JakeSidSmith]

It would be a lot of work to make the library in it's current state support this, but I intend to add this feature in the future. :)

[oyeanuj]

@JakeSidSmith I was wondering if there was any update on this on your side? The library looks great, and I'd love to make use of it but also need this use-case.

Alternatively, are there any plans to make a HoC or not have the ReOrder component render the list items? If there was more flexibility on that front, then instead of having a multiple lists, one could have a parent of multiple list act as 'meta' list? In general, that provide a lot more freedom with different use-cases.

Regardless, thank you for open-sourcing this!

[JakeSidSmith]

I plan to re-write a lot of this in the future. Will hopefully have some time within the next week.

I'll keep you posted. :)

P.s. sorry for the late reply - busy times.

[oyeanuj]

Awesome, that sounds great! I am very curious to learn more about the re-write when you have a moment.

You've probably already seen this but I thought react-sortable-hoc did a good job with the structural part of it, FWIW: https://github.com/clauderic/react-sortable-hoc

[JakeSidSmith]

I was thinking of something similar, but without the need for a HOC... or at least not one defined in quite that way. Something like:

onReorder(previousIndex, newIndex) {
  // Handle reordering
}

render() {
  return (
    <Reorder component="ul" onReorder={this.onReorder}>
      {
        this.props.items.map(item => (
          <li key={item.get('id')}>
            {item.get('name')}
          </li>
        ))
      }
    </Reorder>
  );
}

Will also be making sure it supports ImmutableJS. And that you can define a component to use for the wrapper (same prop as ReactCSSTransitionGroup).

Still not entirely sure how I'll handle dragging between multiple lists though.

[oyeanuj]

Thanks for the details, that looks solid!

As for the connected/multiple lists, a possible way would be to have each list have a key which needs to be passed onDrop and if it matches the key of the target list, can it be dropped. So, for shared lists, they would essentially just be two lists with the same key. Before firing, onReorder, the key would need to be checked.

I have seen https://github.com/SortableJS/react-mixin-sortablejs use a somewhat similar technique.

[JakeSidSmith]

Update: just released 3.0.0-alpha.0 on npm. I'd suggest checking out this version, it should be far more stable than the existing release, fixes a lot of bugs, and adds the ability to drag between lists. :)

See the readme after installation, there's been a considerable change to the interface.