Jump to content
Search Community

Draggable on IOS does not update position of attachment element

GoFuse test
Moderator Tag

Go to solution Solved by GreenSock,

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

Hello

 

I've stumble across an issue with draggable on IOS. I have set up my draggable element 'thumb'  for horizontal axis. Here's my code

Draggable.create( thumb, {type:"left", edgeResistance:1.0, throwProps:false, lockAxis:'left', bounds:{ left:0, width:800} , onDrag:onDragUpdate , onRelease:onDragUp, onPress:onDragPress});

If I start dragging in horizontal axis first the thumb.css('left') updates as intended. But I notice that if I start the dragging vertically (like by accident) first then horizontal the thumb.css('left') will not update thus looking broken. I'm hoping there's a setting I'm missing. Any ideas? Thanks!

 

Link to comment
Share on other sites

lockAxis is supposed to just be a boolean (true or false) and it's only useful if you've got a Draggable that can move on multiple axis. Try just removing that - does that fix things for you? If not, it'd be super helpful to see a reduced test case in codepen just so we can see exactly what's going on. 

Link to comment
Share on other sites

Setting lockAxis to false  or removing it does not fix it the issue. I made a code pen and you can replicate the issue on chrome ios  (ipad) simulator and the device it self. Have a looky

 

Start by dragging vertically first then move horizontally and you can see the onDragUpdate is being called but the draggable element is not moving.

See the Pen reQgWJ by ecsancho (@ecsancho) on CodePen

Link to comment
Share on other sites

  • Solution

Ah, I see the issue - it has to do with the fact that Draggable aims to stay out of the way of native touch scrolling by default. Since your Draggable is only set to allow horizontal dragging, imagine what would happen if the user tried scrolling the PAGE up and down vertically (pressing on that Draggable element and moving up/down). See the issue? I don't see an easy way to work around that in a totally automatic fashion (a lot of this has to do with discerning user and developer intention which sometimes gets really tricky). 

 

The easy fix in this case is to just set allowNativeTouchScrolling:false on your Draggable. Done :)

 

Better?

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