Accounting for scale/position dragging item into transformed container

[Vertical3]

If anyone has any insight here, a MILLION thanks in advance. There is probably a simple way to to this, but I've been struggling to figure this out for days and I'm literally about to lose my mind.

 

I am dragging a placeholder item (GSAP Draggable) from a sidebar and dropping it onto a pannable/zoomable "stage" which uses CSS transforms (jquery.panzoom).

 

When dropped, the draggable element is removed and should be replaced by a new element with absolute positioning inside the panned/zoomed "stage" in the exact same position, visually speaking, regardless of how the stage has been panned/zoomed.

 

I am close, but the calculated position is only correct when the scale is at 1, and I can't figure out how to account for the scale programmatically. I have tried a million things but I just can't wrap my head around it.

 

Codepen here: 

 

You can see that when you zoom (using the mousewheel) to Scale 1 it works they way I want, but at other scales I can't figure out how to account for the difference.

 

The maths I am using now (only works when scale is 1):

$(theNewItem).css({
'top': dropPosition.top + (currentY - (currentY * 2)),
'left': dropPosition.left + (currentX - (currentX * 2))
});`

Notes on the code: 

dropPosition is the $.offset() of the dragged element (relative to the window) at the moment it is "dropped", and currentY and currentX is the transformed x,y values of the container element I am trying to add the new element to, which at scale(1) could be considered 0,0 relative to the window.

 

Side note: 

(currentY - (currentY * 2) is my derpy way to convert the negative number used in the transform matrix to a positive number since I don't know of any other way to convert +/- off the top of my head.

See the Pen meYWvL by anon (@anon) on CodePen

[Vertical3]

I finally figured this out (don't ask me how).

 

Here's the working solution for anyone else that may run into this:

'top': (dropPosition.top - containerPosition.top) / currentScale,
'left': (dropPosition.left - containerPosition.left) / currentScale