Drag and drop interfering with scroll in Angular 7 CDK

8
votes

I have an Ionic app, which is built in angular, and thus has angular cdk drag and drop in it to rearrange a list. Drag and drop works great, however, on mobile, I cannot scroll at all. I believe the drag and drop gestures are eating up my scroll gestures.

I've attempted to set the cdkDragStartDelay to 5000 (milliseconds):

<cu-task-row
  cdkDrag
  [cdkDragData]="task"
  [cdkDragStartDelay]="5000"

It does delay the drag, but I still cannot scroll.

Is it possible to scroll and have drag and drop implemented in mobile using Angular cdk?

4
androidiosangularionic-frameworkelectron
I've the same problem, did you find a solution ? Thx – Joe Allen
no i didnt unfortnately. too bad cdkDrag is not mobile friendly – Josh O'Connor
I suggest you to use custom drag handle for list items. – HirenParekh
It seems there is an issue with drag & drop delay and scrolling : github.com/angular/components/issues/16614 – Joe Allen

4 Answers

1
votes

The only solution (if you stay with cdk) is that if you migrate up to Angular Material latest (^8.1.0).

Cdk DragDrop (Material) 7 and early 8 are blocking the scroll when you are dragging (https://github.com/angular/components/issues/14273#issuecomment-442201350). However it is already resolved with autoscroll feature in ^8.1.0 (https://github.com/angular/components/issues/13588).

So if you migrate up, you can try out the new autoscroll feature that works with simple containers (like div) close well, in addition scrolling with mouse wheel is enabled, but I couldn't make it work with material table for now (was not so much investigation).

If you create an online example, i could try to help you more.

1
votes

If you are starting the scroll from outside the drag and drop elements and it's still not working, you should check the CSS. In particular properties like position and display. They may cause some unexpected results with scrolling if incorrectly set

1
votes

If you wanna scroll works vertical you can do that, via using angular material version 8 this feature added on angular version 8.

also you may face horizontal issue, i solved it via injecting document and using container id

import { DOCUMENT } from '@angular/common';
import {Inject } from '@angular/core';

constructor(@Inject(DOCUMENT) private document: Document) {}

onDragMoved(event) {
    if (event.delta.x === 1) {
        this.document.getElementById('container').scrollLeft += 10;
    } else {
        this.document.getElementById('container').scrollLeft -= 10;
    }
}
0
votes

I took a look at these docs on my tablet just to try it out and I can scroll as long as I initiate the scroll from outside of the drag drop elements. Have you tried adding some empty space around your drag drop elements to see if you can initiate a scroll then?

https://material.angular.io/cdk/drag-drop/overview