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

Question

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

方案1：用户将列表1从左侧拖放到右侧。

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

最后，列表1和列表2都将放置在左侧和右侧。

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

我能够在拖动时显示放置区域，每次都会显示，但是我需要显示该放置区域仅悬停在某些项目上。

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

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

我需要帮助以实现此功能。任何对此表示赞赏的想法。

Answer 1

我看到了代码片段，并添加了一些新代码来复制您想要的行为。

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

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