CODEWITHSUNDEEP
androidiosangularionic-frameworkelectron
Josh O'Connor
Josh O'Connor

Reputation: 4962

Drag and drop interfering with scroll in Angular 7 CDK

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?

Upvotes: 8

Views: 10460

Answers (4)

Mustafa Omran
Mustafa Omran

Reputation: 344

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

Upvotes: 1

Pa Ri
Pa Ri

Reputation: 465

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.

Upvotes: 1

Luis Rico
Luis Rico

Reputation: 635

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

Upvotes: 1

Avatarantella
Avatarantella

Reputation: 99

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

Upvotes: 0

Related Questions