Angular 材质拖放多行列表

Posted 2023-05-08

【中文标题】Angular 材质拖放多行列表

【英文标题】：Angular Material Drag and Drop multi row list

【发布时间】：2020-06-04 12:29:54

【问题描述】：

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

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

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

有谁知道如何进行这项工作？

谢谢。

【参考方案1】：

如果您使用唯一的 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 事件，只是更改数组项

stackblitz