Angular Material拖放多行列表

Question

我有一份我需要订购的元素 list 。为此，我想拖放。

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

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

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

谢谢。

Answer 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} 并且它不是交换元素的经典放置事件，只需更改数组项

stackblitz