Draggable items stop after a few pixels mobile (scroll / drag conflict)
See original GitHub issueI’m having troubles implementing a good drag-drop solution. My goal is to have a catalog with items which I can drag over to a dropzone. On mobile, the catalog items will fill almost the entire window, so it should be possible to scroll over the items without activating the drag-drop system. I’ve tried to implement the ‘hold to drag’ approach for mobile (mentioned in FAQ and other issue-tickets), but dragging seems to stop after moving a few pixels. It seems that the browser thinks the user wants to scroll, which I want to prevent. The drag-end event originates from the library, but I can’t seem to stop it (tried using preventDefault
/stopPropagation
in all events, overflow: hidden
on body, making events passive).
Here is an example: https://jsfiddle.net/Tostifrosti/kyczorsn/4/ Drag-drop for desktop works just fine, but mobile has some issues.
Expected behavior
On mobile, hold a draggable-item and move it to the dropzone. During the drag transition, the draggable-item will follow the touch event, so it seems that the user is holding the item. When let go above the dropzone, the item will disappear.
Actual behavior
On mobile, hold a draggable-item and move it to the dropzone. The item will directly go back as the drag-event is abruptly stopped.
System configuration
interact.js version: 1.10.8 Browser name and version:
- Microsoft Edge 89.0.774.57 (Official build) (64-bit) (using either touchscreen or device emulator mobile+touch)
- Chrome 89.0.4389.90 (Officiële build) (64-bits) (using either touchscreen or device emulator mobile+touch)
- IE 11 (using touchscreen)
- Safari (iOS 14.4.1)
- Chrome (Android) Operating System:
- Windows
- iPhone
- Android
Issue Analytics
- State:
- Created 3 years ago
- Reactions:2
- Comments:6
Top GitHub Comments
I was able to fix it by disabling pan gestures as per the suggestion above, but I just want to note that the CSS property name is
touch-action
, nottouch-actions
. So:I also have this issue. Disabling pan gestures did not work for me. Did anyone have a different solution?