React DnD 在拖动项目时将鼠标悬停在某物上时会生成 dropTargets

Question

我正在尝试执行以下操作：

场景 1：用户将列表 1 从左侧拖放到右侧。

场景 2：同样，用户将列表 2 拖动到右侧，当拖动项悬停在列表 1 上时，必须显示拖放区才能将列表 2 项拖放到此处。

最后，List 1 和 List 2 都将像左侧和右侧一样放置。

使用 React Dnd，这可以实现吗？我试过这个它只在拖动时有效。 https://stackblitz.com/edit/react-pctpdh

我可以在拖动时显示一个放置区域，它每次都会显示，但我需要显示该放置区域只悬停在某个项目上。

下面是示例工作，我必须实现：

需要显示占位符以放置项目，同时悬停其他项目以放置。 （需要在鼠标悬停某些项目时创建动态放置目标）

我需要帮助才能实现此功能。对此的任何想法都非常值得称赞。

Answer 1

我看到了代码 sn-p，我添加了一些新代码来复制您想要的行为。

这个想法是创建一个单独的组件来处理放置动作，可以在需要时重复使用。在这种特殊情况下，我选择使用 ListItem 组件内的组件在两侧创建两个拖放区。

这是更新后的代码：https://stackblitz.com/edit/react-pctpdh