如何将 Angular 的材质拖放与虚拟滚动相结合? [英] How to integrate Angular's material drag and drop with virtual scrolling?

问题描述

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

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.

这里是代码摘要

<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 告诉我:

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 替换 <cdk-virtual-scroll-viewport> 中的 *ngFor，支持 完全相同API 为 *ngFor.

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

我在此处附上了 stackblitz 演示！那么，如何将拖放与虚拟滚动相结合?

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

推荐答案

我能够使用 Angular 8 在虚拟滚动中进行拖放操作.

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>

出于某种原因，moveItemInArray 没有像对 *ngFor 那样触发 *cdkVirtualFor 中的更改检测.因此，我将 this.auditItems = [...this.auditItems]; 添加到我的放置事件中，这似乎解决了它.

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];
}

这篇关于如何将 Angular 的材质拖放与虚拟滚动相结合?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！