Jump to content
GreenSock

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

Draggable elements return to previous position

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys,

I've started working with GSAP a couple of days ago and I'm really impressed with all the potential.

 

I'm trying to achieve something that I don't know if it's possible to do out of the box. Usually I assume I'm the one missing something :)

 

So basically I have a container with a couple of draggables on it and what I was trying to do was on hitTest -> true, to make the element return to the position it had before.

 

I've managed to make this work very easily and send the element to the origin. But I'm struggling a bit with sending it to the previous position.

 

So let's say we have a draggable element on the initial position A  x:300, y:0. Then I drag it to the position  B x:200, y:100. On the position x:200, y:125 (consider each element of the grid 25px) there is one element which I will collide with. 

 

I want my draggable element to return to the position B x:200, y:100. But to be able to that I would have to do maths and calculate the previous position based on the drag and the grid cell dimensions. Or am I missing something? (I hope so :) )

 

Can you give me a few pointers on how to achieve this goal?

 

Thank.

Link to comment
Share on other sites

Hi  hugonoro  :)

 

for getting the last position of the draggable element please try something like this : 

 

var lastPos = {x:0,y:0};
Draggable.create( elem , {
  type: "x,y",
  onPress:function(){
    lastPos.x = this.x;
    lastPos.y = this.y; 
    console.log(" last position : "+ lastPos.x , lastPos.y); // get Draggable current position
  },
  onDragEnd:function(){
    if( your logic ){ TweenLite.to(this.target,1,{ x:lastPos.x , y:lastPos.y }); }
  }
});   
  • Like 6
Link to comment
Share on other sites

Hi Diaco,

thank you for the quick reply.

 

yes I understand your example, but this means I will have to store it for each element before start dragging, right? I will have to keep some sort of temporary state.

Link to comment
Share on other sites

  • Solution

Yes, you'd need to store the state but it should be super simple - you could even assign "lastX" and "lastY" properties to the Draggable instance itself or your element. No need to juggle a whole separate lookup table or a ton of variables.

Draggable.create( elem , {
  type: "x,y",
  onPress:function(){
    this.lastX = this.x;
    this.lastY = this.y; 
  },
  onDragEnd:function(){
    if( your logic ){ TweenLite.to(this.target,1,{ x:this.lastX , y:this.lastY }); }
  }
}); 
  • Like 5
Link to comment
Share on other sites

Yes, that's exactly what I wanted :).

 

I can basically extend the draggable per instance. Perfect!! 

 

Thank you for the quick reply and the simple solution.

 

Keep up with the great work. Awesome tool :)

  • Like 2
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.
×