neb Posted August 18, 2021 Share Posted August 18, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted August 18, 2021 Share Posted August 18, 2021 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 }); } 1 Link to comment Share on other sites More sharing options...
neb Posted August 18, 2021 Author Share Posted August 18, 2021 @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? Link to comment Share on other sites More sharing options...
Solution OSUblake Posted August 18, 2021 Solution Share Posted August 18, 2021 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 4 Link to comment Share on other sites More sharing options...
neb Posted August 19, 2021 Author Share Posted August 19, 2021 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? Link to comment Share on other sites More sharing options...
OSUblake Posted August 19, 2021 Share Posted August 19, 2021 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. 1 Link to comment Share on other sites More sharing options...
neb Posted August 19, 2021 Author Share Posted August 19, 2021 Crystal clear. Thanks again @OSUblake 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now