How can I get the co-ordinates of the dropped point on a droppable?

[suhaibahmed]

Suppose I drag a draggable small square element over a droppable large square element and drop it. How do I get the coordinates within the large element at which the small element was dropped?

[suhaibahmed]

I figured out using quick maths:

  useDndMonitor({
    onDragMove(event) {
      const { over, active } = event;

      if (over) {
        const droppableRect = over.rect;
        const draggableRect = active.rect;

        const x = draggableRect.current.translated.left - droppableRect.left;
        const y = draggableRect.current.translated?.top - droppableRect.top;

        setDroppedText(`Dropped at x: ${x}, y: ${y}`);
      }
    },
  });

over is the droppable and active is the draggable.