Angular 8 & Angular Material: Drag Scrolling with CdkDropList item

Question

I'm trying to provide scrolling while dragging a cdkDropList item. As of right now the page can't scroll without using the mousewheel to scroll. I was hoping to be able to just scroll through the page based on the dragging of the list item. After googling it looks like it wasn't possible until a few months ago?!

I found the following commit on the angular material repo: https://github.com/crisbeto/material2/commit/b4be85f6716a2d1a432ef7109aa06e7255324222

but haven't found any documentation on the angular material site. I was curious if anyone has implemented any auto drag scrolling on a CdkDropList element with Angular Material since this was released. I'm newer to angular. I've tried adding the cdkScrollable tag to the div but have been able to get the auto-scroll function to work while dragging any of the elements in the list.

Thoughts/advice?

Answer 1

From version 9.1.0, the auto scrolling is supported by setting cdkScrollable directive on the parent that should scroll.

So, for v9.1.0 and up, the following code should work:

<div style="height: 500px; overflow-y: auto" cdkScrollable>
  <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
  </div>
</div>

Stackblitz demo:

https://stackblitz.com/edit/angular-swaqkk-njehwg (uses Angular CDK v10.0.1)

https://stackblitz.com/edit/angular-swaqkk-tssfag (uses Angular CDK v13.3.6)

Update 2022-05-11

• From v11.1.0, configurable scroll speed is supported, by using cdkDropListAutoScrollStep property. Take a look at the answer posted by @Ben Racicot: Angular 8 & Angular Material: Drag Scrolling with CdkDropList item.

---

Also, I've posted a more complete answer, which includes more examples and also solutions for Angular8, at the following topic: Angular CDK - issue with scrolling and dragging element inside nested scrollable div

Answer 2

Just combining my research into an answer. Dig deeper into the D&D API for what exists.

  <div #boardWrapper class="board-wrapper" cdkScrollable>
    <!-- cdkDropListGroup when multiple droplists -->    
    <div #boardColumns class="board-columns" cdkDropListGroup>
      <!-- A drop list -->
      <div
        cdkDropList
        [cdkDropListAutoScrollDisabled]="false" <-- enable
        [cdkDropListAutoScrollStep]="35"        <-- speed
        [cdkDropListData]="data.arr"
        (cdkDropListDropped)="drop($event)"
      >
        <!-- A drag item -->
        <div
          cdkDrag
          [cdkDragData]="item.data"
          (cdkDragMoved)="onDragMoved($event)"
          (cdkDragStarted)="dragStarted($event)"
        >content</div>
      </div>
    </div>
  </div>