Javascript 可以使用React-Sortable和React.JS在阵列之间传输的可拖动项？

我现在遇到了一个我还没有解决的问题。我正在用React.JS做一个应用程序。目前，我有一个名为SortableList的组件，我用一个名为data的道具将数据传递给该组件，该结构如下所示：

(Array) Students
  (Object) Name: 'Not Assigned', Items: (Array) - This is an array containing multiple objects and each of them contains a user.
  (Object) Name: 'Assigned', Items: (Array) - Empty

在SortableList组件中，我迭代与上面的数据一起发送的数据属性，它输出两个列表，其中一个为空（已分配），另一个由用户填充（未分配）。我可以在未分配的对象中重新安排，它会为正在发生的每个更改吐出更新的对象。我的主要问题是告诉ReactSortable它可以将用户对象移动到对象“Assigned”中的另一个列表数组

这就是我的迭代在SortableList组件中的样子：

return(
  this.props.data.map( (list, i) => {
    return (<div style={{'marginBottom': '1em'}}><h3>{list.name}</h3><div className="list-container">
      { list.items.map( (item, i) => {
        return (
          <SortableListItem
            key={i}
            updateState={this.updateState}
            items={list.items}
            draggingIndex={this.state.draggingIndex}
            sortId={i}
            outline="list"
            childProps={childProps} className="list-item">
            {item.firstName} {item.lastName}
          </SortableListItem>
        );
      }) }
    <div style={{'clear': 'both', 'width': '100%'}}></div>
    </div></div>);
  })
);

返回(
this.props.data.map（（列表，i）=>{
返回（{list.name}
{list.items.map（（item，i）=>{
返回(
{item.firstName}{item.lastName}
);
}) }
);
})
);

在这个例子中，我给每个用户项命名，如果它被命名为user，可能更容易理解，因为它就是这样

---

我希望这个问题有意义，并且我已经提供了足够的信息。提前谢谢你的帮助

我通过react-dnd和react-dnd-touch后端获得了我想要的功能，react-dnd是一个功能更强大的软件包，但是如果您正在寻找一种简单的方法来重新排列一个列表，react-sortable是一个不错的选择

---

非常感谢@Prabhjot Rai的建议

如果您的要求是这样的，您希望在什么操作上将项目从未分配移动到分配的列表？当项目拖到分配列表的容器上时

SortableList

对于您提到的问题不是一个好的解决方案。它实际上用于对特定列表中的项目进行排序，并侦听这些操作，例如根据用户的要求对列表重新排序。如果您想拖放元素行并在div上侦听该事件，您应该尝试

react dnd

（）。谢谢你的帮助。会让react dnd试一试，看看它是否能更好地满足我的需求。当然。别担心。