JavaScript drag n drop XY location when dropped is off due to point in drag element

Question

I am trying to create a drag and drop application when I can drop a marker on an image. While this is an Angular app I am using plain old JS API for the drag and drop do to issues with CDK .

I am able to move a 20x20 div around the image and drop it and set the location on the image by setting the top/left style of the div. However, the problem I am having is that the offset[XY] is the point of the mouse down. So if I grab the upper left corning my div lands where I expect. If I grab the div in the middle, then it is off by the drag point offset.

How can I correct for this offset of the draggable? Or is there a better solution?

Answer 1

One of my coworkers came up with a great solution. Subscribe to the mousedown event to find the offset and then do the math.