angular -cdk-nested-drag-drop-demo с внешними элементами перетаскивания

Question

Я объединил эту демонстрацию перетаскивания с некоторыми внешними перетаскиваемыми элементами. Как вы можете видеть в примере Stackblitz , эти внешние перетаскиваемые элементы не могут быть сброшены в основную зону сброса или даже в качестве дочернего элемента внутри. Я новичок в Angular и попробовал несколько шагов, которые закончились безрезультатно. Сначала я думаю, что мои draggable-элементы должны быть зарегистрированы в массиве "allDropListsIds" ...

Редактировать: функция "onDragDrop" даже не запускается, поэтому я думаю, что Drop-Element не зарегистрирован, потому что размещение в качестве дочернего элемента не парит зеленым Dropcolor. Вы можете попробовать перетащить некоторые существующие элементы.

Это может быть также проблемой шаблона, так как [connectedDropListsIds], [cdkDropListConnectedTo] может использоваться неправильно.

Было бы хорошо, если бы кто-то мог дай мне несколько советов.

С уважением, Дом

Answer 1

На веб-сайте angular: официальные документы angula приведен пример создания нужной функции с помощью компонента angular / cdk.

Вам потребуется импортируйте в свой файл TS:

import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

А затем используйте событие drop, вызванное вашим компонентом, в свой собственный метод и сделайте что-то вроде этого:

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