Suggestion: Add a hint for mobile and draggable to use `touch-action: none;`

Draggable on mobile triggers onend before you let go of your finger. That may happen when the page has scroll and the phone scroll interferes with the item dragging.

To prevent that from happening you need this style on your container

.container {
  touch-action: none;
}

My suggestion is to include this information somewhere in the examples/docs.

I spent quite some time trying to figure out why it wasn’t working.

[huwiler]

THANK YOU for this. Also, a tip for others - it works fine to add this css to whatever is being dragged as opposed to the container:

.draggable {
  touch-action: none;
}

[gregorybolkenstijn]

For anyone still struggling with this, I had a horizontal slider which I enabled with draggable. On mobile I got the buggy behaviour which was fixed by using touch-action: none;.

But this caused the page to be unscrollable on the element with that property, meaning the user could get stuck if that element almost or completely covered the viewport. I solved it by using a combination of the startAxis: 'x' option for draggable and setting touch-action: pan-y; on the element. In this way, the only dragging catched by interact.js would be horizontally and the only scrolling catched by the browser would be vertically.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action