Angular 材质拖放多行列表

本文介绍了Angular 材质拖放多行列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

我正在使用 Angular Materials list 解决方案，但是我的列表换行了(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} 并且它不是交换元素的经典 drop 事件，只是更改数组项

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 材质拖放多行列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

materials