Draggable and resetting to original x/y coordinates?

[neb]

Hello,

 

I am struggling with something, and I know from reading other threads that x/y coords system is can of worms, but...

 

I have simple system that you drag and drop a series of blocks onto a hitarea. If the block misses its intended target it returns to its start position. If a block hits the hitarea it would then position to an area within the hitarea. If you frag the item out of the hit area it would return to its original x/y coords when the page was loaded.

 

I have looked at startX and startY, but once a draggable is repositioned its startX and startY (0 and 0) are updated to it's new position. 

 

What is the best way to position a Draggable to a x/y coord within its bounds element? Or I suppose the question could be, how do you position a draggable in a global positioning system.

 

Hopefully this makes sense. There's a code pen attached.

 

Thanks!

 

 

 

See the Pen MWmMBVB by nebrekab (@nebrekab) on CodePen

[OSUblake]

Welcome to the forums, @neb

 

By default, Draggable uses transforms, so it's starting coords will be 0, 0.

 

if (!hit) {
  gsap.to(this.target, {
    x: 0,
    y: 0
  });
}

 

[neb]

@OSUblake thanks for the swift reply and the welcome! 

 

Okay, so the 0,0 x/y coords pass will reset it to its starting transform coords, great.

 

And if you wanted to pin it to a specific position in the pink area, once it hits, how would that be achieved? Is it possible to get the pink areas x/y coords and then position it with some logic based on that? 

[OSUblake]

Are you familiar with getBoundingClientRect?

 

That will give you screen position of an element. So you need to find the difference between the draggable and the pink box. 

 

See the Pen ExmBejx by GreenSock (@GreenSock) on CodePen

 

[neb]

I certainly am. Thanks for the pointers and the demo!

 

So appreciative of the support and the amazing GSAP library.

 

One last questions, actually, I see you use gsap.to() and not TweenLite.to() - is the gsap version a wrapper for this same functionality? Is there a benefit to not using the TweenLite approach and vice-versa?

[OSUblake]

TweenLite/Max and TimelineLite/Max are deprecated, and are just aliases to help people migrate over to the new syntax. Check out the Migration Guide. 

 

 

[neb]

Crystal clear. Thanks again @OSUblake