search

haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts
https://muuri.dev
MIT License
10.8k stars 644 forks source link

Window scrolling over draggable item fails #391

Open eternalfusion opened 4 years ago

eternalfusion commented 4 years ago

When I trying to scroll over draggable items on mobile (or using touchscreen emulation on Chrome) it fails. I know it happening cause of touch-action: none css attribute. So I just remove it, and now I can scroll over items, but cannot drag them (thats still pretty logical). Any ideas how to make it work both dragging and scroll, if dragStartPredicate have delay before start dragging?

As I can understand, this issue isn't connected with Autoscroll while dragging issue, which Muuri dev trying to fix at new version.

niklasramo commented 4 years ago

Yep, that's a hard nut to crack in general and I'd say there's only two approaches that work nicely without confusing the user.

  1. Having a dedicated drag handle. In muuri's dev version (https://github.com/haltu/muuri/tree/dev#grid-option-draghandle) you can define that properly so that the touch listeners are added to the handle element instead of the item element.

  2. Having an edit mode in your layout which, when enabled, allows dragging the items.

Lukas-Ertl commented 3 years ago

I have the same problem. I want the grid to be scrollable on mobile like the user would expect and if the user holds the element for 1 second the element should become dragable.

I understand that I can set a delay on dragStartPredicate, but then the grid isn't scrollable

An edit mode or and drag handle is not really an option for my project.

Do you have an Idea how i could make that work?

scroll Mode -> hold element 1 second -> drag mode -> realease item -> scroll mode

cbeiro commented 3 years ago

Hi! I have the same problem. With the delay the grid isn't scrollable, and on Android it has do be first dragged to the side and then the user can move it, if not it scrolls.