2 つの div があり、1 つは内側の div、もう 1 つは外側の div があるとします。

内部の div はズームとパンを担当します (CSS 変換、変換、拡大縮小を使用して行われます)。

ドラッグ アンド ドロップで新しい div を内部 div に追加できるようになりました。ドロップ イベントは、outerdiv

ドロップ イベント中に clientX、clientY の位置を取得します。これを使用して、内部 div を基準とした正しいドロップ位置を見つけます。

これが考えられる解決策です (ただし、ズームすると最終位置がオフセットします)

handleDrop = (e) => {

  const canvasContainerRect = outerDivBoundingRect()
  // const canvasRect = innerDivBoundingRect()

  let finalPosition = { 
            x: (e.clientX - canvasContainerRect.left  - translateX) / zoom,
            y: (e.clientY - canvasContainerRect.top - translateY) / zoom,
        }

  console.log("final: ", finalPosition)
}