如何在react-dnd中把项目放到空的部分？

Question

我想用下面的方法制作一个拖放列表 react-dnd.

我有一个部分工作的例子。codesandbox的例子

我这里有一个问题。

我不能把一个项目放到一个空的区域。

如果我们移动 image1 到第一或第三组，我们不能回到第二组。我们也不能把物品放到组的最后一个位置（我们需要设置一个最后一个位置以外的位置，然后移动到最后一个位置），但我认为这些问题是相关的。

我怀疑问题出在这里，在 DragItem.js:

export default DropTarget(Types.FILE, fileTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  isOverCurrent: monitor.isOver({ shallow: true }),
  canDrop: monitor.canDrop(),
  itemType: monitor.getItemType()
}))(DragSource(Types.FILE, cardSource, collect)(DragItem));

DragSource和DropTarget是同一个组件，所以如果部分没有任何物品，就不是DrogTarget。

当我试图将项目移到更高的位置时 Project.js，整个部分（里面所有的元素）都是一个元素来拖动，这也是没有办法的。

任何想法？或者，也许我必须使用不同的工具来完成这个任务？

Answer 1

看来你是把可拖动的卡片作为可投放的容器（所以没有卡片，无处投放）。

我使用的方法是 react-dnd 之前是用钩子useDrop创建可投放容器。滴滴 所以对于这种情况，我会让你的 <div className="files-container"> 到一个可投放的容器中。这应该可以让你把卡丢到空容器里。

Answer 2

最后，我决定使用一个不同的包来解决这个问题。相反，我决定使用 react-dnd 我用的是 react-sortablejs. 在这种情况下，它更容易实现，并满足我对这项任务的所有期望。

工作实例。codesandbox例子

谢谢！