Draggable apply matrix back to initial values.

[PStemper]

I noticed that when moving a draggable object, it uses a transformation matrix to "move" the element.  Is there a way to get draggable (when a drag is complete for example), to take the matrix transformation values, and apply that back to the x,y of the element, and then remove the transformation?  Basically I want the element to no longer be transformed once the drag is done, but actually change it's x,y to be the new position.

I thought maybe update() would do that, but it appears it doesn't.

The reason I want this is because I want the "new location" of the dragged element, but I don't want to have to deal with deciphering the matrix values.

I did try to (on the end drag event), to pull the matrix values, apply them to the original x,y values, and then remove the matrix, which works (sort of), until the element is dragged again, then Draggable still has the last matrix values and uses them at the start of the new drag.

Basically, what I am looking for is the actual element to be moved to the final location, rather then having the original x,y values used with a transformation.

 

Maybe I am just missing something.

Thanks!

Paul

[GreenSock]

Hi @PStemper. It sounds like you must be using a super old version of GSAP (GSAP 3+ doesn't use matrix values). Do you have a minimal demo that illustrates the problem you're facing? Just something very simple - a draggable <div> or something(?) 

 

Here's a quick one I whipped together that shows how simple it is to get the x/y. 

See the Pen jOvKBQW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also, keep in mind that...

1. The x/y values ARE transforms. They are baked into the matrix. So you can't just remove the transforms and get the x/y. Think of the x, y, scaleX, scaleY, rotation (and all transforms) are baked into the matrix()/matrix3d(). 
2. The Draggable instance itself has "x" and "y" properties you can read
3. You can use gsap.getProperty() anytime to get the x or y or any property of a particular element. Even if there was a matrix applied. 

Does that help? 

[PStemper]

Let me look into this.  I should be using the latest version.  I just "found" the GreenSock stuff yesterday and just downloaded it then. 

 

Oh, and I should have mentioned my "elements" are actually svg elements, rects in fact..

 

Let me process what you mentioned above and see if this addresses what I am looking for.

Thanks for your response!!!

 

Paul