Angular Material拖放多行列表 [英] Angular Material Drag and Drop multi row list

问题描述

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

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

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

有人知道怎么做吗?

谢谢.

解决方案

如果您使用唯一的 cdkDropList，问题在于当您拖动所有项目时会重新排序.我建议一个近似值，包括为每个项目制作一个 cdkDropList

<ng-container *ngFor="let item of items;let i=index"><div class="categories-item" cdkDropListcdkDropListOrientation="水平"[cdkDropListData]="{item:item,index:i}" (cdkDropListDropped)="drop($event)" ><div class="inner" cdkDrag><div class="example-custom-placeholder" *cdkDragPlaceholder></div>{{物品}}

</ng-容器>

哪里

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

看到 cdkDropList 的数据"是一个对象 {item:item,index:i} 并且它不是交换元素的经典放置事件，只需更改数组项

stackblitz

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

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.

Heres an example; https://stackblitz.com/edit/angular-dnd-list-multirow

Does anyone know how to make this work?

Thanks.

解决方案

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>

where

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

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