Angular Material Drag and Drop multi row list

为君一笑 提交于 2021-02-08 08:57:16

问题


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.


回答1:


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



来源:https://stackoverflow.com/questions/60315566/angular-material-drag-and-drop-multi-row-list

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!