لنفترض أن لدينا قسمين، قسم داخلي وقسم خارجي آخر.

شعبة الداخلية مسؤولة عن التكبير/التصغير والتحريك (يتم ذلك باستخدام تحويلات CSS وترجمتها وتغيير حجمها).

يمكن الآن إضافة أقسام جديدة إلى القسم الداخلي عن طريق السحب والإفلات. يتم قبول أحداث الإفلات بواسطة القسم الخارجي

الآن، أثناء حدث الإفلات، تحصل على موضع ClientX، ClientY، والآن باستخدام هذا ابحث عن موضع الإسقاط الصحيح بالنسبة إلى القسم الداخلي.

إليك حل ممكن (ولكن تم إزاحة الموضع النهائي عند التكبير)

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)
}