Как перетащить TableItem из одного компонента в другой в пользовательском интерфейсе материала?

Question

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

Answer 1

Материал пользовательского интерфейса Drag and Drop модуль предоставляет вам возможность легко и декларативно создавать интерфейсы перетаскивания, с поддержкой свободного перетаскивания, сортировки в списке, передачи элементов между списками, анимации, сенсорные устройства, пользовательские маркеры перетаскивания, предварительный просмотр и заполнители, в дополнение к горизонтальным спискам и блокировке по оси.

Вот очень простой пример с двумя компонентами List. Я рекомендую вам поиграть в этом примере ссылки .

HTML

<div class="example-container">
  <h2>To do</h2>

  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>

<div class="example-container">
  <h2>Done</h2>

  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

TS

todo = [
    'Get to work',
    'Pick up groceries',
    'Go home',
    'Fall asleep'
  ];

  done = [
    'Get up',
    'Brush teeth',
    'Take a shower',
    'Check e-mail',
    'Walk dog'
  ];

  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);
    }
  }