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

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: http://codepen.io/anon/pen/meYWvL 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.