Question

我正在寻找创建一个大型放置目标并找到放置坐标。我知道我可以使用DropTargetMonitor和getClientOffset（），但是我不确定确切的实现方式。这是我到目前为止所拥有的：

我正在使用钩子实现：

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

Answer 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>)

在反应dnd中获取下落坐标

1 个答案: