React、react-sortable-hoc 和多个列表

Question

这个图书馆非常非常酷。我有以下问题：

我有多个列表，并且我希望能够在列表内以及列表之间进行拖放以重新排序。在下面的列表中，用户可以选择将合作伙伴移至列表内，或从一个列表移动到另一个列表。

默认情况下，项目只能在同一组件内拖动。如何创建一组可以作为彼此项目目标的组件？

应用程序.js

import React from 'react';
import './App.css';
import SortablePartner from './SortablePartner';

const priorityPartners = [
  "AwesomeTech",
  "Bazinga Software"
];

const medPartners = [
  "Zippy-Do",
  "SillySoft",
  "Samsonite"
];

const lowPartners = [
  "Acme Engineering",
  "Elbow Tech",
  "Rockets & Ricers"
];

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Prioritize Your Partners</h1>
      </header>
      <div className="SortableContainer">
        <SortablePartner priority="High" state={priorityPartners} />
        <SortablePartner priority="Medium" state={medPartners} />
        <SortablePartner priority="Low" state={lowPartners} />
      </div>
    </div>
  );
}

export default App;

SortablePartner.js

import React, {Component} from 'react';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';

const SortableItem = SortableElement(({value}) => {
  return(
    <li>
      <div className="partner-element">
        <div className="partner-name">{value}</div>
        <div className="partner-type">
          MSP
        </div>
      </div>
    </li>
  )
});

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortablePartner extends Component {
  state={};
  constructor(props) {
    super(props);
    this.state.items = props.state;
    this.priority = props.priority;
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };
  render() {
    return (
      <div className="partnerList">
        <h2>Priority: {this.priority}</h2>
        <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
      </div>
    )
  }
}

export default SortablePartner;