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
