Angular Материал Drag and Drop многорядный список - PullRequest
Новая
       36

Angular Материал Drag and Drop многорядный список

0 голосов
/ 20 февраля 2020

У меня есть список предметов, которые мне нужно сделать заказ. Для этого я хотел бы перетащить.

Я использую Angular Материалы список решение, но мой список переходит на новую строку (flex-wrap) Когда у меня несколько строк, он не помещает элементы в где они должны быть.

Вот пример; https://stackblitz.com/edit/angular-dnd-list-multirow

Кто-нибудь знает, как заставить это работать?

Спасибо.

1 Ответ

0 голосов
/ 20 февраля 2020

Проблема, если вы используете уникальный cdkDropList, заключается в том, что при перетаскивании все элементы переупорядочиваются. Я предлагаю примерное приближение, заключающееся в создании cdkDropList для каждого элемента 

<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} и это не событие сброса clasi c, которое обменивается элементами, просто измените элементы массива

stackblitz

...