Drag and Drop interfering with scroll Angular 7 CDK

Question

I have an Angular 7 app and has angular cdk drag and drop in it to rearrange a list. Drag and drop works fine but it cannot auto scroll the div container. Is there any way to get auto scroll to work without updating the version of angular/cdk as per this link https://github.com/angular/components/issues/13588

My current version of angular/cdk: 7.3.7.

StackBlitz: https://stackblitz.com/edit/angular-dggptq-rhbitf

Thanks Aakash. But the version for @angular/cdk used in your example is 8.1.1. I am looking for a workaround for auto scroll for version of angular/cdk as 7.3.7. — Amrita Krishna

Aakash Garg Aakash Garg · Accepted Answer · 2020-06-02T09:56:29

Problem was with Your HTML

<div class="container">
<div cdkDropList [cdkDropListData]="timePeriods" class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
</div>
</div>

To

<div cdkDropList [cdkDropListData]="timePeriods" class="example-list container" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
</div>

Working Stackblitz :- https://stackblitz.com/edit/angular-dggptq-fmjjjx

Reason :- for autoscroll to work your scroll should be on cdk drop list, so i removed extra div and applied your container class to cdkdrop list div.

Drag and Drop interfering with scroll Angular 7 CDK

1 Answers