在反应 dnd 中获取放置坐标

【问题标题】：Obtaining drop coordinates in react dnd在反应 dnd 中获取放置坐标
【发布时间】：2020-08-13 00:03:54
【问题描述】：

我希望创建一个大型放置目标并找到放置坐标。我知道我可以使用 DropTargetMonitor 和 getClientOffset() 但我不确定正确的实现。这是我目前所拥有的：

我正在使用钩子实现：

const [{ isOver }, drop] = useDrop({
    accept: ItemTypes.Card,
    collect: monitor => ({
        isOver: !!monitor.isOver()
    )},
    drop: (item, monitor) => {
        const dropResult = ??
    }
})

【问题讨论】：

标签： reactjs drag-and-drop react-dnd

【解决方案1】：

我一直在寻找相同的方法，最后我的解决方法是在放置目标周围放置一个带有元素引用的 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>)

【讨论】：