时间戳

首页 > 解决方案 > Angular 材质拖放多行列表

angular - Angular 材质拖放多行列表

问题描述

我有一份我需要订购的物品清单。为此，我想拖放。

我正在使用 Angular Materials列表解决方案，但是我的列表会换行（flex-wrap）当我有多行时，它不会将项目放在它们应该在的位置。

这是一个例子；https://stackblitz.com/edit/angular-dnd-list-multirow

有谁知道如何使这项工作？

谢谢。

标签： angulardrag-and-dropangular-material

解决方案

如果您使用唯一的 cdkDropList，问题是当您拖动所有项目时重新排序。我建议一个近似值，包括为每个项目制作一个 cdkDropList

<div #contenedor class="categories" [style.width]="option" cdkDropListGroup> 
    <ng-container *ngFor="let item of items;let i=index">
        <div class="categories-item" cdkDropList 
    cdkDropListOrientation="horizontal"
    [cdkDropListData]="{item:item,index:i}" (cdkDropListDropped)="drop($event)" >
            <div class="inner"  cdkDrag>
        <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
        {{item}}
        </div>
        </div>
    </ng-container>
</div>

在哪里

  drop(event: CdkDragDrop<any>) {
    this.items[event.previousContainer.data.index]=event.container.data.item
    this.items[event.container.data.index]=event.previousContainer.data.item
  }

看到 cdkDropList 的“数据”是一个对象 {item:item,index:i} 并且它不是交换元素的经典 drop 事件，只需更改数组项

堆栈闪电战

推荐阅读