Angular 角度材质拖放多行列表

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

我使用的是角材料解决方案，但我的列表使用了一条新的线（柔性包裹） 当我有多行时，它不会把项目放在它们应该放的地方

这里有一个例子

有人知道怎么做吗

---

谢谢。

如果您使用唯一的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>

{{item}}

在哪里

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

drop（事件：CdkDragDrop