Angular Material拖放多行列表

问题描述

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

I have a list of items which I need do order. To do so, I'd like to drag and drop.

我正在使用Angular Materials 列表解决方案，但我的清单突然换行了(flex-wrap)当我有多行时，它不会将项目放在应有的位置.

I'm using Angular Materials list solution, but my list waps to a new line (flex-wrap)When I have multiple rows, it doesn't put the items in where they sholud be.

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

有人知道如何进行这项工作吗?

Does anyone know how to make this work?

谢谢.

推荐答案

如果使用唯一的cdkDropList，则问题是当拖动所有项目时将其重新排序.我建议您使用一个近似词，为每个项目制作一个cdkDropList

The problem if you use an unique cdkDropList is that when you drag all the items reorder. I suggest an aproximation that consist in make a cdkDropList for each item

<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}，并且不是经典的掉落事件可以交换元素，只需更改数组项即可.

See that the "data" of the cdkDropList is an object {item:item,index:i} and it's not the clasic drop event that interchange elements, just change the array items

stackblitz

这篇关于Angular Material拖放多行列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！