Jump to content
Search Community

Draggable: Resetting position

tarwin test
Moderator Tag

Go to solution Solved by Rodrigo,

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,

 

Thanks for the amazing tool. I'm having some problems resetting the position of my Draggable object when I re-create it. In my example the second image doesn't show properly but that's fine.

 

To replicate my problem simply drag the image a little, click the new link twice, and you will see that the image is where you left it. I'd expect it to reset position.

 

Is there a way I can reset the position? I hope this is something with Draggable rather than being embarrassed by it being my crappy code.

 

A second quick question. Is there a reason that you cannot set the "trigger" on any element and only on a child element? It would be useful if it was otherwise.

 

Thanks,

See the Pen eywrA by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi,

 

Unfortunately you're going to be embarrassed ;), but your code is not at all crappy.

 

The issue is that the element "#photo" maintains the x and y values modified by Draggable, so when you create the instance again and add the image the <div> container is still in the position you left it.

 

There are two options to include in your doImage() function. First use a set() instance with clearProps in the  config object, like this:

$('#new-image').on('click', function(e){
  e.preventDefault();
  Draggable.get($('#photo')).kill();
  
  TweenLite.set("#photo", {clearProps:"x,y"});
  
  doImage();
});

Clear props basically removes any inline style added by GSAP to the element in question, therefore resetting the element's x and y values to the original ones before any Draggable interaction, in this case zero for both.

 

The second option is the same set() instance but manually set the x and y properties to zero:

$('#new-image').on('click', function(e){
  e.preventDefault();
  Draggable.get($('#photo')).kill();
  
  TweenLite.set("#photo", {x:0,y:0});
  
  doImage();
});

That should do the trick.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Yup, Rodrigo is exactly right.

 

Here is a fork of your demo to see the TweenLite.set() method in action:

http://codepen.io/GreenSock/pen/wmbyh

 

I disabled some of your css resetting as I wasn't sure what it was doing.

 

---

 

A trigger does not have to be a child of the Draggable's target. Here is a basic example:

http://codepen.io/GreenSock/pen/AnsLr

Link to comment
Share on other sites

Thanks for the help people. My actual application (very Alpha @ http://specter.co/app/ - if you want to play it works best on phones - only a demo so please ignore the horribly structured code) is a bit more complex than my example so I'm going to keep looking into it. I think this will give me something to look into.

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.
×
×
  • Create New...