Jump to content
Search Community

Dragger.enable causes issues with another draggable

eyesoar test
Moderator Tag

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

I have 2 draggables
drag1 - type:"scrollTop"
drag2 - type:"scrollLeft"


On an ipad I notice when dragging horizontally the page jiggles vertically.
o stop this I disable drag1 on DragStart of drag2. This is all fine but …
When I enable drag1 on DragEnd of drag2 the content of drag2 snaps back to it's starting position.


This error occurs on both the iPad and chrome osx.

As I understand it this should work just fine - any pointers to what is going on or how to get around it would be greatly appreciated.


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

Link to comment
Share on other sites

Thanks for the suggestion
That does work but it's not quite what I'm after.


I was still hoping to have a up/down drag on the horizontal div go through to the parent div.
This is why I was disabling on DragStart not on press. The horizontal div doesn't fire an a DragStart if I just drag vertically and I don't have to find a place outside of that div to drag on.


Besides that I would still like to know what is going on with the enable() call taking over another dragger.

Link to comment
Share on other sites

Hi eyesoar and welcome to the GreenSock forums.


Sorry to hear you are having problems. 

Our latest version of Draggable has some improvements regarding lockAxis and some use-cases of enable() interfering with other Draggables.


I know you are linking to /latest from our CDN but unfortunately we are still waiting on cdnjs to serve the real latest version of Draggable which is 0.13.0.


Please try your demo using this Draggable




Any better?

  • Like 2
Link to comment
Share on other sites



This certainly does do work the way I was after. It is an elegant solution I had all sorts of previous tests to see what direction someone was dragging in to try to block the wrong type of movement. I didn't realise such a simple answer was sitting there all along.


Hmmm.... ok :)


pls try this : 

See the Pen dPwpoB by MAW (@MAW) on CodePen



While this does solves my problem but there is still the issue that enable() is buggy.

I have had problems with it in a previous project but that was quite complicated and I assumed it was something I was doing wrong So had some nasty logic to get around it. 

I think it would be good to flag enable() as something to be avoided unless it is being used where there aren't multiple draggables.

Link to comment
Share on other sites

Hi Eyesoar,


I'm trying to catch up on this post. 

I've looked Diaco's pen and it is a great example of having nested Draggables work in different directions.


Can you provide a reduced test case, with clear instructions that shows where exactly enable() is buggy? It would really help the team get up to speed on tracking it down. If there is something that is clearly wrong we will do our best to fix it, or advise accordingly.



  • Like 2
Link to comment
Share on other sites

Hi Carl
I thought it was fairly clear but try this.

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


You should be able to drag the black section (drag2) left and right.
But enabling drag1 causes drag2 to snap back to its original position.

comment out 


to see how dragging drag2 should work.

Commenting in or out one line of code to see the issue is about as reduced a case as I can make it.



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...