Я пытаюсь выяснить, как перенести элемент из одного списка в <div> и изменить списки этого элемента.

Цель состоит в том, чтобы иметь возможность переносить элементы из одного списка на ярлыки в боковой панели навигации и переключать элемент в список на этой целевой странице.

Я попытался реализовать очень простое доказательство концепции на stackblitz, но безрезультатно.

Возможно ли перенести элемент в данный div (даже тот, который не отображает список) и переключить списки этого элемента?

Вот ссылка на stackblitz:https://stackblitz.com/edit/angular-special-drop-zone

В stackblitz я пытаюсь иметь возможность переносить элементы из списка задач в заголовок DONE и добавлять их в список DONE.

РЕДАКТИРОВАТЬ: Вот GIF-изображение того, чего я пытаюсь достичь. После перехода к «Невыполненной работе» в боковой навигации я хочу, чтобы он переключился на список невыполненных работ.

TL; DR:

Добавьте все cdkDrop* атрибуты в div, которые вы хотите, чтобы иметь возможность перетаскивать, просто не отображайте список. Убедитесь, что он обладает тем же cdkDropListdata свойством, что и видимый список. Смотрите ссылки stackblitz для примеров.

Я нашел 2 способа решить эту проблему. Оба требуют обработки зоны перетаскивания <div> как независимого cdkDropList.

1. Используя cdkDropListConnectedTo

Документация: https://stackblitz.com/edit/ng-cdkdroplistgroup

Stackblitz:CDKDROPLIST подключен к примеру

Подключите исходный список к невидимому выпадающему списку (это просто div / label), используя cdkDropListConnectedTo .

2. Используя cdkDropListGroup

Смотрите документацию

Stackblitz: пример CdkDropListGroup

Используйте cdkDropListGroup директиву для a div , которая содержит все списки, между которыми вы хотите иметь возможность перетаскивать. Они будут автоматически подключены, как если бы вы использовали cdkDropListConnectedTo для каждого из них, со всеми их уникальными именами.

Чтобы иметь возможность перейти к метке и получить ее в конечном итоге в списке, выполните тот же процесс, что и выше, используя видимый список и метку с одним и тем же cdkDropListdata свойством.

В некоторых случаях это невозможно, поскольку метка и видимый список могут находиться в разных компонентах и получать их данные из службы данных или observable. В этом случае вам захочется обработать drop событие и обновить списки самостоятельно, а не просто использовать transferArrayItem() . Если компоненты подписались на изменения, поведение будет таким же.