question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Draggable items stop after a few pixels mobile (scroll / drag conflict)

See original GitHub issue

I’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:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:6

github_iconTop GitHub Comments

2reactions
laymonagecommented, Oct 4, 2022

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, not touch-actions. So:

.draggable {
  touch-action: pinch-zoom;
}
1reaction
nkevcommented, Aug 2, 2022

I also have this issue. Disabling pan gestures did not work for me. Did anyone have a different solution?

Read more comments on GitHub >

github_iconTop Results From Across the Web

jQuery touch-punch draggable in list: scroll and drag interferes ...
I am trying to build a list of draggables but the drag event somehow interferes with the scroll event on mobile devices (tested...
Read more >
Drag'n'Drop with mouse events - The Modern JavaScript Tutorial
If elements are dragged to top/bottom window edges – the page scrolls up/down to allow further dragging. There is no horizontal scroll (this ......
Read more >
Docs | Utilities | Draggable - GreenSock
Provides a surprisingly simple way to make virtually any DOM element draggable, spinnable, tossable, and even flick-scrollable using mouse and/or touch ...
Read more >
Supporting drag and drop - Unity - Manual
The DragExitedEvent is sent when the user drags any draggable object over a VisualElement and releases the mouse pointer. This only occurs if...
Read more >
Take control of your scroll - customizing pull-to-refresh and ...
When they reach the bottom, the overflow container stops scrolling because there's no more content to consume. In other words, the user reaches ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found