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

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

Изменить: функция «onDragDrop» даже не запускается, поэтому я думаю, что отброшенный элемент не зарегистрирован, потому что размещение в качестве дочернего элемента не зависает от зеленого цвета Dropcolor. Вы можете попробовать перетащить некоторые существующие элементы.

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

Было бы неплохо, если бы кто-нибудь мог мне подсказать.

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


angular drag-and-drop angular-cdk
person meDom    schedule 07.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

На веб-сайте 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);
}
person Matheus Carvalho    schedule 07.02.2020