如何解决在反应dnd中获取下落坐标
我正在寻找创建一个大型放置目标并找到放置坐标。我知道我可以使用DropTargetMonitor和getClientOffset(),但是我不确定确切的实现方式。这是我到目前为止所拥有的:
我正在使用钩子实现:
const [{ isOver },drop] = useDrop({
accept: ItemTypes.Card,collect: monitor => ({
isOver: !!monitor.isOver()
)},drop: (item,monitor) => {
const dropResult = ??
}
})
解决方法
我一直在寻找相同的方法,最后我的解决方法是在放置目标周围放置一个带有元素引用的 div 并使用它进行测量。因为我还在那个容器 div 中放了其他东西,所以我将放置目标绝对放置在整个容器上。
类似的东西(伪代码,复制粘贴风险自负)
const containerRef = useRef<HTMLDivElement | null>();
const [,drop] = useDrop({
drop: (item,monitor) => {
console.log(
containerRef.current.getBoundingClientRect(),monitor.getClientOffset())
)
}
// etcetera
});
return (<div ref={containerRef} style={{postion:'relative'}}>
<div ref={drop} style={{
position:'absolute',top:0,left:0,width:'100%',height:'100%'
}}></div>
</div>)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。