React DND 16.0.1：如何获取被拖拽元素的放置坐标而非鼠标坐标

我在使用React DND 16.0.1开发垂直时间线拖拽功能，需要将元素拖拽到时间线后，根据被放置元素的像素坐标计算对应的时间。但目前获取到的始终是放置时的鼠标光标坐标，而非被拖拽元素自身的坐标。

我的核心需求是：用被放置元素的顶部位置来计算对应时间，因为元素高度会随“时长”变化，鼠标位置无法准确匹配元素的时间起点。

以下是我当前的实现代码：

计算本地偏移的函数 #

function calc_local_offset(monitor) {
    let offset= monitor.getClientOffset()
    const deltaX = offset.x - boundingBox.current.left
    const deltaY = offset.y - boundingBox.current.top
    return { x: deltaX, y: deltaY }
}

useDrop 相关代码 #

const [{ isOver, canDrop }, drop_ref] = useDrop({
    ...
    drop: (item, monitor) => onDrop({...item}, calc_local_offset(monitor)),
    collect: (monitor) => ({
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
    }),
    ...
})

放置区域与拖拽组件的补充代码 #

const boundingBox = useRef(null)

function combinedRef(el) {
    drop_ref(el);
    if (el) {
        boundingBox.current = el.getBoundingClientRect();
    }
}

return (
    <div className="work_day_workspace">
        <span className="workspace_header">{workspace.identifier}</span>
        <div ref={combinedRef} >
            {workspace.executions.map((execution) => {
                return (
                    <Execution execution={execution} />
                )
            })
            }
        </div>
    </div>
)

可拖拽组件 Execution #

export const Execution = memo(function Execution({ execution }) {
  const [{ opacity }, drag] = useDrag(
    () => ({
       type: "execution",
       item: { execution },
       collect: (monitor) => ({
       opacity: monitor.isDragging() ? 0.4 : 1,
       item: monitor.getItem(),
      }),
    }),
  [execution],
 )

return (
   <div>
     .... 展示内容
   </div>
  )
})

内容的提问来源于stack exchange，提问作者bwright