Jump to content
Search Community

Issue with Draggable on touch devices

AsKadir test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello,

I made a horizontal container with items inside, it's draggable, scrollable and infinite.

It's working great, except dragging not working as excepted for touch devices.

 

I don't have any errors and don't know what to do.

Can someone help me, please? I'm sure this demo will help a lot people.

See the Pen VwWXBJO by ChicagoJostik (@ChicagoJostik) on CodePen

Link to comment
Share on other sites

  • Solution

Hi AsKadir!

 

Callbacks don't pass in the position. They pass in the event, and you're just grabbing event.x which is the same as event.clientX, which might be undefined with touch. You should get the position provided by Draggable.

 

onDragStart() {
    touchStart = this.x;
},
onDrag() {
  touchX = this.x;
  scrollY += (touchX - touchStart) * 2.5;
  touchStart = touchX;
},

 

You could also clean up your code your using quickSetter and gsap.ticker instead of requestAnimationFrame. And GSAP has a lerp utility function.

 

  • Like 4
  • Thanks 1
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...