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
