Draggable – get position in external function

[paul_ngc 2 Likes (Newbie)]

I'm using Draggable to give a few elements the option to be dragged around the viewport.

 

I have a function that I'm calling later on that needs the position (x,y) of these dragged items.

Is it possible to get the x and y values of those dragged elements? OffsetTop is not working due to the 3d translates.

[GreenSock 8,117 Likes (Superhero)]

Have you tried getBoundingClientRect()? That's a method that's available on any DOM element (not related to Draggable).

 

See https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

 

If you're looking for the actual x/y transform values, you can get those on the Draggable instance (it has "x" and "y" properties), or using element._gsTransform.x and element._gsTransform.y;

 

Does that answer your question?

[paul_ngc 2 Likes (Newbie)]

Thanks! The element._gsTransform.x works great. But I cannot seem to get it when working with a ThrowPropsPlugin tween. I want the coordinates when I send an Item to a different position. Animation is all good and smooth.

 

But I want to get all the coordinates during this tween. I only get 1 output at the end when I use the onUpdate function. I've added an Codepen that probably makes it more clear what I want to accomplish: 

See the Pen qqbvYp?editors=0010 by anon (@anon) on CodePen

[GreenSock 8,117 Likes (Superhero)]

I assume this is what you were looking for:

http://codepen.io/anon/pen/aBdxMM?editors=0011

 

Right? 

[paul_ngc 2 Likes (Newbie)]

Thank you It wasn't clear to me I had to pack it inside an function for it to work as I thought it would.