1

I need to have Drag&drop working with Virtual scroll. Data source of my VS is observable. I tried this code but it's not working, no changes at the VS list, just animation:

<ng-container *ngIf="observableData | async as items">
<cdk-virtual-scroll-viewport
    cdkDropList 
    #virtualScroller
    (cdkDropListDropped)="drop($event)">
    <mat-list>
        <mat-list-item 
            cdkDrag     
            *cdkVirtualFor="let item of items; let i = index; trackBy: trackByIdx">
            <h4 matLine cdkDragHandle>
                List item Title
            </h4>
            <p matLine cdkDragHandle>
                List item text
            </p>                
        </mat-list-item>
    </mat-list>
</cdk-virtual-scroll-viewport>

and here is my ts handler:

drop(event: CdkDragDrop<any[]>) {
     const vsStartIndex = this.virtualScroller.getRenderedRange().start;
     moveItemInArray( this.observableData.value, event.previousIndex + 
     vsStartIndex, event.currentIndex + vsStartIndex);
}

How do I implement d&d with Observable lists?

Angry Beaver
  • 415
  • 1
  • 6
  • 18

1 Answers1

2

You must pass data to list [cdkDropListData]="items"

<cdk-virtual-scroll-viewport
cdkDropList
[cdkDropListData]="items"
#virtualScroller
(cdkDropListDropped)="drop($event)">
ali karimi
  • 542
  • 4
  • 13