DragSource, DropTarget, DragDropContext as Components?

[jehoshua02]

I'm a big fan of reusable components. I'm currently trying to figure out how I would create a reusable SortableList component in React.

Consider this dream code:

import React from 'react';
import SortableList from 'sortable-list';
import MyItem from 'components/MyItem';

var items = [...];

React.render(
  <SortableList>
    {items.map(function (item) {
      return <MyItem data={item} key={item.id} />;
    })}
  </SortableList>,
  document.body
);

This SortableList component would magically enable items in the list to be reordered via drag and drop. I'm also dreaming that if two of these SortableLists were on the page, items could be dragged between them.

I'm having a hard time wrapping my head around how this would be done. Can anyone foresee the obstacles to doing this with React DnD? Is it feasible? Or should I give up and just make every DnD component custom without intention of reusing across projects?

[gaearon]

You can try. ;-)

There'll be the issue of contexts I'm not sure yet how to solve properly. But once you figure out the rest I think you'll figure out something about it.

You could do something like

class SortableList {
  render() {
    return React.Children.map(this.props.children, child => <SortableItem>{child}</SortableItem>);
  }
}

@DragSource(...)
@DropTarget(...)
class SortableItem {
  render() {
    return this.props.connectDragSource(
      this.props.connectDropTarget(
        React.Children.only(this.props.children)
      )
    );
  }
}

So yeah, I think it's doable.

[gaearon]

Closing as non-actionable: you can build these in userland, and React DnD is a lower level library.

[sasidhar-d]

@jehoshua02 any luck on this component? I am trying to build something similar, and the DragSource is messed up as the entire div gets dragged (the preview is wrong) instead of single SortableItem. It only works when the SortableItem is a simple div with no children, I am trying to do this with ListItem from react material UI.