fionchadd Posted September 23, 2021 Share Posted September 23, 2021 Hi there, I'm trying to give my tortoise a hat using Draggable and I'm really struggling to get the behaviour I want. The ideal behaviour is that if the hat overlaps the dropzone (outlined in red) when the user releases the mouse, it snaps to the center of the dropzone. Otherwise it falls to the ground. Falling to the ground is working fine, but I can't get it to snap to the center of the dropzone. I found a few codepens / threads on the forums with similar requests, but they either use a left/top drag or absolute positioning; my elements are part of an SVG so I'm unable to use those methods. What I'm doing at the moment is getting the left and top position of the dropzone, then on drag end getting the left and top position of the hat, the distance between that and the dropzone, and the current X and Y values of the hat. Then I'm adding half of the distance to the current X and Y values and tweening to that. It seems to get fairly close on certain screen sizes, but it doesn't seem to be a responsive solution and although it is tweening, it doesn't seem to be tweening to the exact center of the dropzone. I realise this isn't really a "how do I use draggable" question so I totally understand if it's beyond the scope of support that you offer, but if you have any similar examples you can point me towards I'd be very grateful! Hannah See the Pen xxrzvpJ by fionchadd (@fionchadd) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted September 23, 2021 Share Posted September 23, 2021 Hi fionchadd Coordinates can be really confusing in SVG, so here's how to make this easier. Initially have your hat and drop area sitting in the top left corner, so their initial coordinates will be 0,0. Now use GSAP to position the hat and drop box. gsap.set("#hat", { x: 200, y: 200 }); gsap.set("#droparea", { x: 500, y: 100 }); Or even better, also have your items centered. gsap.set("#hat", { xPercent: -50, yPercent: -50, x: 200, y: 200 }); gsap.set("#droparea", { xPercent: -50, yPercent: -50, x: 500, y: 100 }); Now when you have a hit, just to move the hat to the coords you set for the drop area. gsap.to("#hat", { x: 500, y: 100 }) 3 Link to comment Share on other sites More sharing options...
Solution OSUblake Posted September 23, 2021 Solution Share Posted September 23, 2021 Also, you never need to do this. var currTrans = $("#hat").css('-webkit-transform').split(/[()]/)[1]; var posx = currTrans.split(',')[4]; var posy = currTrans.split(',')[5]; Just use GSAP's get property. https://greensock.com/docs/v3/GSAP/gsap.getProperty() let x = gsap.getProperty(".foo", "x"); let y = gsap.getProperty(".foo", "y"); 4 Link to comment Share on other sites More sharing options...
fionchadd Posted September 23, 2021 Author Share Posted September 23, 2021 Hi OSUblake, Thank-you so much, this is *perfect*! And so much simpler than what I was trying to do. Thanks for the heads-up on getProperty as well! I'm very grateful Hannah 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