Jump to content


Draggable with snap, when throwing and click again, jumps to end position

Recommended Posts



Has anyone noticed when using Draggable with throwProps:true, with restricted bounds AND with snap that if throwing the object and try to catch it before it reaches its destination it directly jumps to calculating end position. It should just freeze the object when the user click on it when it still in motion. Like when you are not using the snap.


Im creating a webapp with a navigation that I can throw :) Like the facebook app.


Try with the examples http://www.greensock.com/draggable/ the first one "Throw" with the setting  "Snap to grid" checked. You will see what happens. 


Any thoughts or solution?




Link to comment
Share on other sites

Solved it! :)

I had to check to see if the object was moving and then return the current x position in the snap function.


Hope this helps people for creating the slickest slider menu for webapps :)

var preventSnap = false;
        x: function(endValue)
        return this.x;
        if(endValue > this.maxX / 2)
        $('#top_header .hit').data('isOpen', true);
        return this.maxX;
        $('#top_header .hit').data('isOpen', false);
        return 0;
    onDragEnd:function() { preventSnap = true; },
    onDrag:function() { preventSnap = false; },
onClick:onClickHandler, //Here you call the function to open or close the menu with just a click.
onThrowComplete:function(){ preventSnap = false; }
  • Like 1
Link to comment
Share on other sites

Hi Robert,


Glad you were able to solve your issue and thank you for posting your solution, it will be helpful for other users that might come across this scenario.




Link to comment
Share on other sites

Yeah, thanks for offering your solution. I'll also implement a workaround internally for the next release. The reason this is happening is that when you click/touch to start dragging, it automatically applies the bounds in order to make sure things are starting from a "legal" spot. However, I think it'd make sense to suspend that behavior if the element is mid-tween. 

Link to comment
Share on other sites

Here's a preview of the upcoming release - would you mind giving it a shot and letting us know if it works well for you? It should behave the way you were expecting now (clicking while the tween is in progress won't force the snap). 


Link to comment
Share on other sites



I tried the attached file and it works perfecto! :D  Im honored that I could help you guys with this great library to be even better! :) 


Keep up the awesome work you do and looking forward for the new release!




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.