Jump to content


Accounting for scale/position dragging item into transformed container

Recommended Posts

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):

'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

Link to comment
Share on other sites

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
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.