Angular 材质拖放多行列表答案

【问题标题】：Angular Material Drag and Drop multi row listAngular 材质拖放多行列表
【发布时间】：2020-06-04 12:29:54
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

标签： angular drag-and-drop angular-material

【解决方案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

【讨论】：