如何将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是因为docs告诉我：

  

*cdkVirtualFor替换*ngFor内的<cdk-virtual-scroll-viewport>，并支持与*ngFor完全相同的API 。

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

Answer 1

我可以使用Angular 8在虚拟滚动中进行拖放操作。

y

由于某些原因，<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];

Answer 2

很抱歉，但是我认为Angular材料 cdkDrag目前不能与虚拟滚动配合使用，请参见链接的材料issue。

在提到的线程之后，似乎只有一个demo有效，但是遗憾的是，提供的sources仅作为编译的js而不是ts可用。

实际上，您必须决定通过angulars drag and drop使用cdkDrag或通过angulars scrolling使用virtual scroll。

Answer 3

问题是，下拉列表引用了渲染项目的索引。因此，只有在将当前渲染视图的开始索引添加到索引中的拖放项时，此方法才起作用：

<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时，在放下触发的事件将显示{start: 8, end: 10}，因此，当您添加渲染的开始索引时，解决问题。

希望这对我有帮助。

Answer 4

如果您要查找下图所示的内容，则需要使用在列表代码之间传输项目的代码。查看此链接https://material.angular.io/cdk/drag-drop/overview#transferring-items-between-lists

根据您的要求对css进行一些快速调整，因为我在浏览器本身中对css进行了一些更改，以获得以下图像显示的结果。

您还可以创建3列或4列。让我知道您是否需要我提供代码？