title: React, react-sortable-hoc and multiple lists
body: <p>This library is very very cool.  I have the following problem:</p>
  <p>I have multiple lists, and I want to be able to drag and drop to reorder within the list, as well as between the lists.  In the lists below, the user may choose to move a partner within the list, or from one list to another.</p>
  <p>It looks like by default, the items can only be dragged within the same component.  How can I create a set of components that can be targets for each other's items?</p>
  <p><strong>App.js</strong></p>
  <pre><code>import React from 'react';
  import './App.css';
  import SortablePartner from './SortablePartner';
  
  const priorityPartners = [
    &quot;AwesomeTech&quot;,
    &quot;Bazinga Software&quot;
  ];
  
  const medPartners = [
    &quot;Zippy-Do&quot;,
    &quot;SillySoft&quot;,
    &quot;Samsonite&quot;
  ];
  
  const lowPartners = [
    &quot;Acme Engineering&quot;,
    &quot;Elbow Tech&quot;,
    &quot;Rockets &amp; Ricers&quot;
  ];
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;header className=&quot;App-header&quot;&gt;
          &lt;h1&gt;Prioritize Your Partners&lt;/h1&gt;
        &lt;/header&gt;
        &lt;div className=&quot;SortableContainer&quot;&gt;
          &lt;SortablePartner priority=&quot;High&quot; state={priorityPartners} /&gt;
          &lt;SortablePartner priority=&quot;Medium&quot; state={medPartners} /&gt;
          &lt;SortablePartner priority=&quot;Low&quot; state={lowPartners} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>SortablePartner.js</strong></p>
  <pre><code>import React, {Component} from 'react';
  import {SortableContainer, SortableElement} from 'react-sortable-hoc';
  import arrayMove from 'array-move';
  
  const SortableItem = SortableElement(({value}) =&gt; {
    return(
      &lt;li&gt;
        &lt;div className=&quot;partner-element&quot;&gt;
          &lt;div className=&quot;partner-name&quot;&gt;{value}&lt;/div&gt;
          &lt;div className=&quot;partner-type&quot;&gt;
            MSP
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    )
  });
  
  const SortableList = SortableContainer(({items}) =&gt; {
    return (
      &lt;ul&gt;
        {items.map((value, index) =&gt; (
          &lt;SortableItem key={`item-${value}`} index={index} value={value} /&gt;
        ))}
      &lt;/ul&gt;
    );
  });
  
  class SortablePartner extends Component {
    state={};
    constructor(props) {
      super(props);
      this.state.items = props.state;
      this.priority = props.priority;
    };
    onSortEnd = ({oldIndex, newIndex}) =&gt; {
      this.setState(({items}) =&gt; ({
        items: arrayMove(items, oldIndex, newIndex),
      }));
    };
    render() {
      return (
        &lt;div className=&quot;partnerList&quot;&gt;
          &lt;h2&gt;Priority: {this.priority}&lt;/h2&gt;
          &lt;SortableList items={this.state.items} onSortEnd={this.onSortEnd} /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default SortablePartner;
  </code></pre>