Предположим, у нас есть два элемента div: один внутренний и внешний.

Внутренний элемент div отвечает за масштабирование и панорамирование (выполняется с помощью CSS-преобразований, перевода и масштабирования).

Теперь новые элементы div можно добавлять во внутренний блок путем перетаскивания. События drop принимаются внешним div

Теперь во время события перетаскивания вы получаете позицию 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)
}