如何解决react-dnd monitor.getItem() 总是等于悬停的项目
为了制作一个 2d 可重组列表,我设置了以下示例。
https://codesandbox.io/s/wizardly-cerf-4zpkt?file=/src/DragableItem.js:696-746
然而,悬停在组件上的是总是悬停的组件。这意味着没有办法移动任何东西,因为它总是会放在自己身上。有没有办法解决这个问题?
要复制,请将 9 个框中的任何一个拖到其他框上。
解决方法
示例代码和框有两个错误。
- hover 方法的第一个参数是拖动项,而不是悬停项。
- 悬停的项目是调用 useDrop 的当前项目。另一种思考方式是悬停项调用了useDrop的hover方法,所以你已经知道悬停项了。
这是带有更正的代码和框。 https://codesandbox.io/s/blazing-browser-3h47r?file=/src/DragableItem.js
,在悬停方法中添加此 monitor.isOver({ shallow: true });
代码。
像这样:
hover(item,monitor) {
monitor.isOver({ shallow: true });
//your code here
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。