Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fionchadd

Draggable snap moving element to center of other element

Go to solution Solved by OSUblake,

Recommended Posts

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

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
})

 

 

  • Like 3
Link to comment
Share on other sites

  • Solution

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");   

 

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×