Issue with Draggable on mobile

[Tribal Toronto]

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,
            onClick:function(event){}

});

 

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

 

[GreenSock]

Sorry to hear about the trouble. Two questions: 

1. Have you tried updating Draggable and ThrowPropsPlugin? Looks like you're using very old versions.
2. Does it help if you set allowNativeTouchScrolling:false? 

[Tribal Toronto]

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

[GreenSock]

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/]

[Tribal Toronto]

Hey, no problem, here is a codepen that's boiled down to just jQuery and Greensock. In mobile swipe can still cause an accidental click.

 

See the Pen MmqNzP by gardahck (@gardahck) on CodePen.

 

 

[GreenSock]

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? 

[Tribal Toronto]

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.

[GreenSock]

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

[OSUblake]

I'm not sure. I could get it stuck dragging really lightly and slow from the edges, but I don't know if that's draggable or the device just recognizing the touch. But I could not get it stuck interacting with it like I normally would.

[PointC]

I just tried two devices -- one iOS and one Android. I couldn't get it stuck either.

[GreenSock]

Thanks @OSUblake and @PointC for confirming. @Tribal Toronto you said the actual issue was that the link would get triggered (click), right? Well, that because it doesn't really drag, it's interpreted as a click since the mousedown/mouseup are in the same spot - right?

[Tribal Toronto]

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.

http://w.ll.am/video/androidRec.mp4

(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!

[GreenSock]

Cool, thanks for the video. I just tried it on another Android device and still can't replicate that issue. It sure seems like an edge case, but let us know if you can reproduce it elsewhere or stumble upon any other clues. Good luck with the project.