如何将Angular的材质拖放与虚拟滚动集成？

Question

我正在尝试将Angular材质的虚拟滚动与拖放功能集成在一起，但是由于某些原因，当我尝试实现此功能时，它会还原项目，而当我尝试拖放某个元素时，它将不起作用。

这是代码摘要

<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>

如您所见，我没有做任何特别的事情，除了我替换了*ngFor，cdkVirtualFor因为文档告诉我：

*cdkVirtualFor内容替换*ngFor的内部<cdk-virtual-scroll-viewport>，支撑完全相同的API作为*ngFor。

我在这里附上了一个stackblitz演示！那么，如何将拖放与虚拟滚动集成在一起？

Answer 1

我能够使用 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>

出于某种原因，moveItemInArray没有*cdkVirtualFor像对*ngFor. 所以，我添加this.auditItems = [...this.auditItems];了我的 drop 事件，这似乎解决了它。

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

Answer 2

所以问题是，下拉列表引用了渲染项目的索引。因此，只有将当前渲染视图的起始索引添加到从/到索引中删除的项目时，这才有效，如下所示：

<cdk-virtual-scroll-viewport cdkDropList #virtualScroller 
  (cdkDropListDropped)="onItemDrop($event)"  itemSize="50" class="example-viewport">  
  <div cdkDrag *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

打字稿代码将具有：

@ViewChild('virtualScroller') virtualScroller: CdkVirtualScrollViewport;
...
onItemDrop(event: CdkDragDrop<FormViewOrderingItem>) {
    const vsStartIndex = this.virtualScroller.getRenderedRange().start;
    moveItemInArray(this.formViewOrdering, event.previousIndex + vsStartIndex, event.currentIndex + vsStartIndex);
}

例如，当渲染范围为 2-20 时，当您将索引 10 处的项目移动到列表的索引 12 时，在 drop 上触发的事件将显示，{start: 8, end: 10}因此当您添加渲染的起始索引时，它会解决该问题。

希望这有帮助，它对我有用。