मान लें कि हमारे पास दो div हैं, एक आंतरिक div और दूसरा बाहरी 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)
}