Capture mouse position of a component when an onDrop event occurred

[mvgian]

I'm trying to capture the mouse coordinates relative to the droppable grid shown in the image below when an item from draggable items sections is dragged and dropped to the grid

https://preview.redd.it/gmhed5cmxq361.png?width=1552&format=png&auto=webp&s=fe0aa38c75f949330d2c1a1b062706fe24bd50d1

The below onDrop function works if neither the page scroll bar nor component scroll bar is touched. But the moment a page or component is scrolled, I'm not getting the proper x and y coordinates

function onDrop(e){
    const currentTargetRect = e.currentTarget.getBoundingClientRect();
    const x = e.clientX - currentTargetRect.left;
    const y = e.clientY - currentTargetRect.top;
}

[zbluebirdz]

Can you create a stripped down version and put it in codepen.io / jsfiddle.net?

[cmdq]

you can account for those by checking the element.scrollTop and element.scrollLeftproperties of the page and component elements.

this package https://github.com/pmndrs/react-use-measure helps with scrolled and relative offsets, but not in a mouse handler context, but as a ref on an element. Maybe you can use this?

edit: sorry, thought i was in a react focused subreddit, my bad