Jump to content
Search Community

Issue with Draggable on mobile

Tribal Toronto 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

We have a sub-site that was created using draggable as a side to side slider.


You can see the slider in action here.... https://goo.gl/wuJBAu


The issue is that when in mobile (you will have to browse in desktop mode to recreate the issue) and you start dragging, sometimes the draggable portion gets stuck and then because it doesn't move it fires the click event on the object your finger is on.


Here's the draggable object...

Draggable.create($(this), {type:dragType, edgeResistance:0.65, bounds:{minX:-tempWidth, maxX:0, minY:0, maxY:0, width:tempWidth},dragClickables:true, lockAxis:true, liveSnap:true,snap: {
            y: function() {
                return 0;
            }}, throwProps:true,



Can anyone tell me if there is a solution to fix this issue? Should I report it as a bug? For some reason desktop is unaffected by this issue.


Using: Draggable 0.14.1 and ThrowProps 0.9.9


Link to comment
Share on other sites

Thanks for the reply. I did actually update them right after this post but I haven't seen any change in behavior.  It will also catch the click event when trying to scroll up and down on mobile even though type is only 'x' .


The allowNativeTouchScrolling works in the fact that it becomes very hard to click on the area now. That does seem like a closer fix... is there something I can use in conjunction with that to get the clicks working again? I also tried minimumMovement:6 which didn't seem to help

Link to comment
Share on other sites

Hm, is there any chance you could provide a reduced test case in codepen or jsfiddle? It's just very challenging to try to troubleshoot a live site with so many other moving pieces and potential conflicts. I wasn't able to reproduce the issue when I tested - is there anything special I need to do? 


Also, I noticed you're loading jquery.slick - I wonder if maybe that's causing a conflict (totally guessing). A reduced test case in codepen will definitely help to identify what's going on. We certainly want to fix any bugs, but I'm not sure that Draggable is the culprit here. 


[side note: I noticed you're loading TweenMax from the "/latest/" directory on the CDN but the CDN provider actually dropped support for that and refused to update it despite our complaints, so it is deprecated. I'd recommend loading the latest version directly, which at this time is /1.19.1/]

  • Like 2
Link to comment
Share on other sites

Thanks for putting together the demo. Super helpful. However, I can't seem to reproduce the problem. Can you give me detailed instructions about how to get it to break? You said "on mobile" but then you also said it had to be in "desktop mode", so I'm a little confused. I tried it on my iPad, on my desktop, in Chrome with the mobile emulator...couldn't get it to break. Help? Is there a specific device you're talking about? 

Link to comment
Share on other sites

Desktop mode isn't needed for the codepen example. The demo will actually break in straight up android mobile (I think iOS too but I don't have that device to test at the moment). The chrome emulator won't break with it since it still technically a desktop browser even when in emulation mode.


To replicate swipe slowly on the device left and right . Usually on the 3rd or 4rth swipe it will trigger a click. You can kind of force this interaction by doing a quick short down drag and then drag either direction. It's like the down drag is still being caught even though drag should only be X.

Link to comment
Share on other sites

Can anyone else replicate this? I've tried 3 devices with no luck. I just ordered a different Android device to see if I can replicate it there (I already tried an old one). Sorry, @Tribal Toronto - I really want to help but I'm kinda stuck here. I'm also curious if the preview of the upcoming Draggable helps anything: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

Link to comment
Share on other sites

Hey all, thanks for this... maybe it's just the phone I've been testing on. It's a sony xperia z5 premium running 7.0 .


I've included a video of the issue just for reference but it seems it's just the phone and we can enable it for the site since this seems to be an edge case.


(please ignore the audio)


Let me know if you can duplicate this on any of your phone please but otherwise I'll leave you all alone now :)


Thanks again!

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