drag-drop + virtual scroll: Draggable item loses its position when new list item is rendered in the DOM as a result of virtual scrollingbug

amitapatiyal24 commented 3 years ago

Reproduction

Use StackBlitz to reproduce your issue:

Components: https://stackblitz.com/fork/components-issue
Harnesses: https://stackblitz.com/fork/harness-issue

Steps to reproduce:

```
<cdk-virtual-scroll-viewport  cdkDropList  itemSize="25" scrollViewport cdkDropList
```
class="viewport ps blue-scrollbar member-box" [perfectScrollbar] (scrolledIndexChange)="nextBatch()" [cdkDropListData] = "selectedDimension?.memberSelections" (cdkDropListDropped)="onDrag($event)" [style.height]="memberHeight">
<li *cdkVirtualFor="let members of memberSelections " cdkDrag>{{member}}

public onDrag(event: CdkDragDrop<string[]>): void { if (event.previousContainer === event.container) { const PREV_IND_WITH_OFFSET: number = this.range ? this.range.start + event.previousIndex : event.previousIndex; const CUR_IND_WITH_OFFSET: number = this.range ? this.range.start + event.currentIndex : event.currentIndex ; moveItemInArray( this.selectedDimension.memberSelections, PREV_IND_WITH_OFFSET, CUR_IND_WITH_OFFSET); this.memberSelections = [...this.memberSelections]; } else { transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex); } this.val.emit(false); } public nextBatch(){ this.virtualForOf.viewChange.subscribe((range: ListRange) => this.range = range); console.log(this.range); }

Expected Behavior

What behavior were you expecting to see? list drag and drop for virtual scroll with a large dataset. e.g.(1000 of records)

Actual Behavior

What behavior did you actually see? I am using CDK virtual scroll and CDK drag/drop together for rendering the large list. When I am doing the drag and drop in the middle of the list, the dragged item is coming back to its original position. I have tried to solve this issue using the range, but still not able to get the expected result.