Topic: Sortable plugin - issue with scrolling

sebastian_clever free asked 3 years ago


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 3 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 free commented 3 years ago

Hi, sure, maybe you can download those 2 videos, it should be the best description:

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 3 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 3 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.


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



Specification of the issue

  • ForumUser: 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