在反应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>)