Drag and drop interfering with scroll in Angular 7 CDK

Question

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?

Answer 1

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.

Answer 2

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

Answer 3

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;
    }
}