Angular Material Drag and Drop multi row list

Question

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.

Answer 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