두 개의 div가 있다고 가정해 보겠습니다. 하나는 내부 div이고 다른 하나는 외부 div입니다.

내부 div는 확대/축소 및 이동(CSS 변환, 번역 및 크기 조정을 사용하여 수행됨)을 담당합니다.

이제 드래그 앤 드롭으로 내부 div에 새 div를 추가할 수 있습니다. 드롭 이벤트는 externaldiv

이제 드롭 이벤트 중에 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)
}