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

Posted 2023-05-08

【中文标题】如何将项目拖放到 react-dnd 中的空白部分？

【英文标题】：How to drop item to empty section in react-dnd?

【发布时间】：2020-09-04 18:42:16

【问题描述】：

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

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

我有一个问题：

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

如果我们将image1 移动到第一组或第三组，我们将无法返回第二组。我们也不能将 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 的更高位置时，整个部分（包括里面的所有元素）都是一个要拖动的元素，这也不是解决方案。

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

【问题讨论】：

只需将空白部分也设为放置目标

【参考方案1】：

您似乎将可拖动卡片用作可放置容器（因此没有卡片，无处可放置）。

我之前使用react-dnd 的方式是使用钩子useDrop ract-dnd use drop 创建可放置容器，因此对于这种情况，我会将您的<div className="files-container"> 设置为可放置容器。这应该允许您将卡片放入空容器中。

【参考方案2】：

最后我决定使用不同的包来解决这个问题。取而代之的是react-dnd，我使用了react-sortablejs。在这种情况下实现起来更容易，并且符合我对这项任务的所有期望。

工作示例：codesandbox example

谢谢！