Angular Material перетащить из списка в контейнер

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

Сначала я пробовал сделать это так:

<div class="container" cdkDropListGroup>
  <div class="list-1" cdkDropList [cdkDropListData]="items" (cdkDropListDropped)="drop($event)">
    <ul>
      <li cdkDrag *ngFor="let item of items">
        {{item.name}}

        <div class="example-drag" *cdkDragPreview>
          {{item.name}}
        </div>
      </li>
    </ul>
  </div>
  <div class="list-2" cdkDropList [cdkDropListData]="done" (cdkDropListDropped)="drop($event)">
    <div class="example-drop" cdkDrag cdkDragBoundary=".list-2" *ngFor="let item of done">
      {{item.name}}
    </div>
  </div>
</div>

Но это просто помещает его во второй список и упорядочивает. Я не хочу такого поведения. Вот stackblitz, показывающий, как я хочу, чтобы второй контейнер работал:

https://stackblitz.com/edit/angular-ivy-nc3wps

Вот пример моей неудачной попытки:

https://stackblitz.com/edit/angular-ivy-4dcyd1

И это пытается объединить два:

https://stackblitz.com/edit/angular-ivy-m2ewfh

Надеюсь, этой информации достаточно, чтобы кто-то мне помог.


person r3plica    schedule 06.05.2021    source источник


Ответы (1)


вы можете использовать это свойство, чтобы отключить сортировку в целевом контейнере

cdkDropListSortingDisabled="true"
person Jordi Martí    schedule 12.05.2021