如何将项目放到react-dnd中的空节？

Question

我正在尝试使用react-dnd创建一个拖放列表。

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

我这里有一个问题：

我不能将项目放在空白区中。

如果我们将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是相同的组件，所以如果section本身没有任何项，那么它就不是DrogTarget。

当我试图将项目移到更高的Project.js时，整个部分(包含所有元素)是一个要拖动的元素，这也不是一个解决方案。

有什么想法吗？或者我必须使用不同的工具来完成这项任务？

Answer 1

看起来你正在使用你的可拖拽的卡片作为可丢弃的容器(所以没有卡片，没有地方可以丢弃)。

我之前使用react-dnd的方法是用钩子useDrop ract-dnd use drop创建可丢弃的容器，所以在这个例子中，我会把你的<div className="files-container">放入一个可丢弃的容器中。这应该允许您将卡片放入空的容器中。

Answer 2

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

工作示例：codesandbox example

谢谢!