Draggable dragClickables:true does not work since 2.1

[andreas84 1 Likes (Newbie)]

Hi

 

First post. I just updated to latest and greatest (2.1.1), i read in the release notes that dragClickables is default true by now. Cool I though, I already had that to true. But after updating the drags no longer work (on chrome 72) when starting on a clickable (<a>).

 

Reverted back to 2.0.2 and they work again.

 

//Andreas

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

[Carl 11,109 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

Thanks so much for the clear demo. Very helpful.

We will have to look into this further. We will report back with what we find.

 

Sorry for the inconvenience.

 

 

[GreenSock 18,266 Likes (Superhero)]

Ugh, I'm so sorry about that. Literally one character typo. Doh! Here's a fixed [uncompressed] version: 

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Better? 

 

I'll push this out in the next release. 

[andreas84 1 Likes (Newbie)]

Aye fast work, thanks a lot! Confirmed working in above codepen using the beta link you provided. Might post something else today if I can make a codepen of it  

[robs 9 Likes (Newbie)]

Hi,

 

for me dragClickables is still not working — neither in version 2.0.2 nor in 2.1.

 

I would like to have 2 images turn into a slider if the viewport is < 768px (see attached image).

The animation works fine, only the dragClickables doesn't have any effect. If my draggable item is an <a> tag it stops working.

 

The interesting thing about it is: If I copy-paste my code into a codepen (see below) everything works fine. But in my (Laravel-) environment it's not working (unless I turn the <a> into a <div> or something else).

 

I'm importing GSAP via NPM. I also tried to import the files from a local folder (not node_modules) but without success. Unfortunately I'm not able to use the beta-file Jack @GreenSock posted above — at least not by importing it as module.

 

I know it's hard to help me in my case since you would have to have look into my real project. But maybe anyone else encountered a similar problem and found a solution. ?

 

Thanks so much,

Robert 

 

P.S.: Quick note concerning the pen: you have to open it in codepen in order to drag the viewport to less than 768 px

 

See the Pen zbrJrj by rob83 (@rob83) on CodePen

 

[GreenSock 18,266 Likes (Superhero)]

I just pushed out GSAP 2.1.2 which has the Draggable fix in place. 

 

@robs, can you please update your GSAP and give it a shot? I tried your codepen and it seemed to work great. Perhaps I'm missing something(?) 

[robs 9 Likes (Newbie)]

Thanks, @GreenSock, now it's working.

Btw. the thing you missed was that the codpen was working for me as well. That was actually the strange thing: If I copy-pasted the code from the pen into my local project it stopped working.

But now it's all good.

Thanks again!

[robs 9 Likes (Newbie)]

Sorry, still have a little issue:

If I "throw" the content to the left and resize the window to > 768px the two images are shifted to the left (since the inline style still remains). You can reproduce that behavior in my codepen above.

 

I know customers usually don't resize their browser window back and forth but unfortunately there are some devices (like iPhone X) that exceed the 768px viewport width in landscape.

I fixed this very simply by resetting the transform property on window resize: 

window.onresize = function () {
    document.querySelector($content).style.transform = 'translate3d(0px, 0px, 0px)'
};

 

However now I have a different strange behavior: if I turn the screen back into portrait I'm able to dragged the content out of the container (see gif below). Looking at the properties in the dev tools I see that the transform property after dragging to the left is set to:

translate3d(-594px, 0px, 0px);

 

The maximum (and/or minimum) value should be translate3d(-279px, 0px, 0px) in case of the iPhone X.

 

Did I do something wrong by setting the transform-value on window resize? Is there a better (and waterproof) solution how to handle this?

 

Thanks so much!

[GreenSock 18,266 Likes (Superhero)]

It's tough to say without a demo, but my guess is that the problem is you're re-defining the transforms OUTSIDE of GSAP (something we generally don't recommend). To maximize performance and avoid ambiguities in matrix decomposition, GSAP caches transform-related data (in a _gsTransform object attached to the element, created the first time you use GSAP to alter transforms on that element). 

 

So maybe try making this change in your onresize: 

//OLD:
document.querySelector($content).style.transform = 'translate3d(0px, 0px, 0px)'

//NEW:
TweenMax.set($content, {x:0, y:0});

 

If that doesn't help, please provide a reduced test case in codepen and we can take a peek. 

 

Cheers!

[robs 9 Likes (Newbie)]

This solved the problem! Thanks again!