Как использовать перетаскивание Angular7 (угловой материал) между двумя компонентами

В последнее время angular вводили перетаскивание в angular материал https://material.angular.io/cdk/drag-drop/overview.

Все примеры описаны в одном компоненте. Как использовать это в двух разных компонентах, перетащите один элемент компонента и поместите в другой компонент.

Ответ 1

Вы можете использовать свойства id и cdkDropListConnectedTo, чтобы связать оба списка:

Компонент 1:

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

Компонент 2:

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

Если вам нужно подключить несколько списков к одному списку, вы можете использовать следующий синтаксис: [cdkDropListConnectedTo]="['list-1', 'list-2', 'list-3', 'list-4']"

После связывания списков необходимо правильно обновить один или оба списка в зависимости от действий. Вы можете сделать это с помощью функции drop следующим образом:

drop(event: CdkDragDrop<string[]>) {
    if (event.container.id === event.previousContainer.id) {
      // move inside same list
      moveItemInArray(this.list, event.previousIndex, event.currentIndex);
    } else {
      // move between lists
    }
}

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

Ответ 2

Не уверен, что вышеуказанное решение по-прежнему работает с угловыми 7.2.9 и угловым материалом /cdk 7.3.5

Это не сработало для меня, и поэтому после некоторого трудного времени - мне удалось заставить его работать, используя директиву cdkDropListGroup. Все cdkDropList в cdkDropListGroup будут доступны для удаления элементов. Вам больше не нужно связывать удаленные списки со свойством cdkDropListConnectedTo property

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>

Ответ 3

Component1

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

Компонент 2

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

общая служба для обоих компонентов

drop(event: CdkDragDrop<string[]>) {
        if (event.previousContainer === event.container) {
            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        } else {
            transferArrayItem(event.previousContainer.data,
                event.container.data,
                event.previousIndex,
                event.currentIndex);
        }
    }

Родительский компонент

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>

вызов метода отбрасывания из компонента

drop(event: CdkDragDrop<string[]>) {
      this.sharedService.drop(event);
  }