在拖动项目时将鼠标悬停在某物上时会反应DnD make dropTargets [英] React DnD make dropTargets when hover on something while dragging item

问题描述

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

I'm trying to do something like below:

方案1:用户将列表1从左侧拖放到右侧.

Scenario 1: User will drag and drop List 1 from left side to right side.

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

Scenario 2: Again, User will drag list 2 to right side, when that dragging item hover on list 1, have to show drop zones to drop that list 2 item here.

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

Finally, List 1 and List 2 both will be placed like left and right side.

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

With React Dnd, Is this achievable? and I tried this it works only while dragging. https://stackblitz.com/edit/react-pctpdh

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

I'm able to show a drop area while dragging, it shows every time, but I need to show that drop area only hover on some item.

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

Below is the sample work, I have to achieve:

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

Need to show placeholder to drop an item while hover other items to drop. (Need to Create dynamic drop targets while mouse hover some item)

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

I need a help on this to achieve this feature.Any idea on this really commendable.

推荐答案

我看到了代码片段，并添加了一些新代码来复制所需的行为.

I saw the code snippet and i added some new code that replicates your desired behavior.

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

The idea is to create a separate component to handle drop actions, that can be reused when is needed. In this particular case, I choose to use the component inside your ListItem component to create two drop zones on both sides.

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

这篇关于在拖动项目时将鼠标悬停在某物上时会反应DnD make dropTargets的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！