javascript - 如何将项目放到 react-dnd 中的空部分？

Question

我正在尝试使用 react-dnd 制作拖放列表。

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

我这里有一个问题:

我无法将项目放入空白部分。

如果我们将 image1 移动到第一组或第三组，我们将无法返回到第二组。我们也不能drop item到group的最后一个位置(我们需要设置一个非最后一个的位置，然后移动到最后一个)，但我认为这些问题是相关的。

我怀疑问题出在这里，在 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之前使用钩子(Hook) useDrop ract-dnd use drop 创建可放置容器所以对于这种情况，我会让你的 <div className="files-container">放入可转换的容器中。这应该允许您将卡片放入空容器中。