Перетаскивание списка передачи между компонентами путем перетаскивания на метку навигации целевого компонента - PullRequest
Новая
       43

Перетаскивание списка передачи между компонентами путем перетаскивания на метку навигации целевого компонента

1 голос
/ 08 марта 2019

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

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

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

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

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

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

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

enter image description here

1 Ответ

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

TL; DR:

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

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

1. Использование cdkDropListConnectedTo

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

Stackblitz: CdkDropListConnectedTo Example

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

2. Использование cdkDropListGroup

См. Документацию

Stackblitz: Пример CdkDropListGroup

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

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

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

...