How to integrate Angular's material drag and drop with virtual scrolling?

Issue

I'm trying to integrate Angular material's virtual scrolling with drag and drop, but for some reason when i'm trying to implement this it reverts the items and when i'm trying to drag and drop an element it doesn't work.

Here is a summary of the code

<cdk-virtual-scroll-viewport cdkDropList  itemSize="50" class="example-viewport">
  <div cdkDrag *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

As you can see, I didn't do anything special, besides that I replaced *ngFor with cdkVirtualFor because the docs are telling me that:

*cdkVirtualFor replaces *ngFor inside of a <cdk-virtual-scroll-viewport>, supporting the exact same API as *ngFor.

I've attached here a stackblitz demo! So, how to integrate drag and drop with virtual scrolling?

Solution

I was able to get drag and drop working inside of virtual scroll with Angular 8.

<cdk-virtual-scroll-viewport itemSize="10" class="viewport">
  <mat-chip-list
    class="mat-chip-list-stacked"
    cdkDropList
    [cdkDropListData]="items"
    (cdkDropListDropped)="drop($event)">
    <mat-chip *cdkVirtualFor="let item of items" cdkDrag>
      {{ item.name }}
    </mat-chip>
  </mat-chip-list>
</cdk-virtual-scroll-viewport>

For some reason, moveItemInArray did not fire off change detection in the *cdkVirtualFor like it did for *ngFor. So, I added this.auditItems = [...this.auditItems]; to my drop event and that seemed to fix it.

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    this.items = [...this.items];
}

EDIT

As of cdk version 14.2.0 I am unable to make a working version combining both my answer and @ronenmiller. I have created a stackblitz to reproduce the issue. It seems even when utilizing getRenderedRange the index produced from the cdkDropListDropped does not give the anticipated result.

Stackblitz Example

Answered By - Nabel