search

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.45k stars 3.7k forks source link

No horizontal auto scrolling on mobile PWA #1818

Open Doogiemuc opened 4 years ago

Doogiemuc commented 4 years ago

Thank you for the great SortableJS! I am using it in my progressive mobile web application (PWA). I have a simple sortable with a few vertically stacked items in it. I can drag'n'drop those items from top to bottom. Auto scroll works fine.

But when I drag the ghost to the very right, the mobile HTML page in iOS Safari starts a horizontal auto scroll. That shoud not happen in a PWA.

How can I disable horizontal auto scrolling, while keeping vertical auto scrolling?

Doogiemuc commented 4 years ago

Ok I found what needs to be changed in the source code. There even already is a variable to configure this: canScrollX, canScrollY.
https://github.com/SortableJS/Sortable/blob/e02baa8ebb2a71e93d61c1281ae63e286212ee78/plugins/AutoScroll/AutoScroll.js#L225

Only need to adapt this, so that this variable can be set via configuration...

waynevanson commented 4 years ago

@Doogiemuc This sounds reasonable.

A variable called scrollDirection: "vertical" | "horizontal" | "both", defaulting to "both".

How does that sound?

danielfranz commented 4 years ago

I'm in the same situation. The new variable sounds great. Has this been released yet? I'm using Sortable 1.10.2 and neither scrollDirection:'vertical' nor direction:'vertical' seem to prevent the unwanted side-scrolling. Thanks!

Admin11B commented 4 years ago

We have the same issue in our application. It does not seem that adding a variable solves the problem in general (although the availability of such an option will not be superfluous). The problem is that we are able to drag the card infinitely far beyond the workspace both horizontally right and vertically down.

soluxos commented 3 years ago

I'm hitting the same issue on our application. @waynevanson is there any update on this problem? Your proposed variable sounds like a good solution.

zoomtronic commented 3 years ago

To fix this overflow problem just add this in your css , html, body {overflow-x: hidden;}

hexdrinker commented 2 years ago

is there still no solutions? html, body {overflow-x: hidden;} this is not working.

tlietz commented 6 months ago

I think this is happening because when the element is being dragged, part of it is outside the viewport, which causes the browser to try and scroll towards that direction. html, body {overflow-x: hidden;} helps, but does not completely fix this on mobile browsers for me.

To solve this, I used a dnd library that does not rely on the native browser API