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

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

0 голосов
/ 21 ноября 2018

Как и в угловых, недавно введенных перетаскивании в угловой материал https://material.angular.io/cdk/drag-drop/overview.

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

Ответы [ 2 ]

0 голосов
/ 20 марта 2019

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

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

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>
0 голосов
/ 22 ноября 2018

Вы можете использовать свойства 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(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
    }
}

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

...