Draggable elements return to previous position

[hugonoro 6 Likes (Newbie)]

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.

[Diaco 1,948 Likes (Superhero)]

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

[hugonoro 6 Likes (Newbie)]

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.

[GreenSock 8,117 Likes (Superhero)]

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

[hugonoro 6 Likes (Newbie)]

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