Interact.js: Dragging doesn't working without "touch-action" css rule on mobile Chrome, Opera, etc.. Except mobile Firefox

Created on 5 Dec 2017 · 3Comments · Source: taye/interact.js

Hello! Please help me, describe what i doing wrong.

I created simplest example to test this library, but it doesn't work on mobile browsers except Firefox :(

Expected behavior

Dragging working on all devices.

Actual behavior

Dragging working only on desktop and on mobile Firefox. On mobile (or in chrome browser with mobile emulation) dragging will start, but ends just after few moves.

System configuration

interact.js version: 1.3.1
Browser name and version: Chrome, Opera, etc?..
Operating System: Android, Arch linux, etc?..

Source

believer-ufa

Most helpful comment

Ow, i finded solution! See working example.

Can you add note about it on your website?

You just must add next CSS to your draggable elements:

.draggable {
    touch-action: none
}

believer-ufa on 5 Dec 2017

👍8 🚀1

All 3 comments

Ow, i finded solution! See working example.

Can you add note about it on your website?

You just must add next CSS to your draggable elements:

.draggable {
    touch-action: none
}

believer-ufa on 5 Dec 2017

👍8 🚀1

I'd like to upvote this issue. I encountered the same problem while upgrading from 1.2.9 to 1.3.3. When dragging the dragend event fires almost immediately after dragstart. I was able to reproduce this behavior in mobile emulator mode in Chrome 63 and in Chrome 63 on a Samsung Galaxy S6 . It works fine for desktop.

This change was introduced sometime between 1.3.0-alpha.3 and 1.3.0-alpha.5 (alpha.4 is not available on NPM).

JSFiddle reproducer

Thanks for the workaround @believer-ufa!