Sortable plugin - issue with scrolling


Topic: Sortable plugin - issue with scrolling

sebastian_clever asked 4 years ago

Hi,

I have a problem with Sortable plugin for Angular. Using the basic example from the doc, I'm able to drag & drop on desktop and mobile version, however on mobile I can see an issue with scrolling.

When I'm using your example on my phone, I can simply reorder the items, however if I want to use your example code with my clean project, then I cannot reorder items, instead of this I can start dragging and scroll the page. On your example I can simply drag the item, and scroll the page if I move the item on the top/bottom of the page. That's what I'm expecting to see.

Best regards


Arkadiusz Idzikowski staff commented 4 years ago

@sebastian_clever Could you provide some more details about the problem so we can reproduce it on our end? On which device/browser did you test the component? Are there any other components/elements in the application view to which you copied the sortable code?


sebastian_clever commented 4 years ago

Hi, sure, maybe you can download those 2 videos, it should be the best description: https://file.io/L8elafcouRx2 https://file.io/k3zw0Rus2ZUo

Regarding device/browser, it is a MacBook with Chrome browser. That's a new solution with just your sample code from "Basic Example" for Sortable plugin section.


Arkadiusz Idzikowski staff commented 4 years ago

Thank you, we will try to reproduce the problem on our end and let you know what we found.


Arkadiusz Idzikowski staff commented 4 years ago

@sebastian_clever it looks like the touch event default behavior is not disabled correctly. As a workaround for now, please try to disable it manually in your app:

<div mdbSortableList (touchmove)="$event.preventDefault()">...</div>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 10.1.1
  • Device: Mac
  • Browser: Safari/Chrome
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No