Угловой CDK, соединяющий несколько зон перетаскивания с помощью cdkDropListConnectedTo

Question

Я создаю простой интерфейс доски с дорожками для плавания, думаю, доски для плавания Jira или доски Trello

Красные линии показывают ток

Синим цветом показан поток, который я хотел бы реализовать

У меня есть три столбца с именами «To Do», «In Progress» и «Done». В настоящее время я могу перетащить элемент из «Выполнено» в «Выполняется», из «Выполняется» в «Готово» и из «Готово» обратно в «Выполнено», используя cdkDropListConnectedTo.

Что я хочу знать, так это то, как я могу переместить элемент из «Готово» в «Выполнение» и «Выполняется», аналогично, как переместить элемент из «Выполняется» в «Готово» и «Выполнить» и от «Готово» до «Выполняется» и «Делается».

Первым делом я передал несколько ссылок на cdkDropListConnectedTo, но это не сработало. Я буду признателен, если кто-нибудь может указать мне правильное направление.

Спасибо

Вот что я написал до сих пор: https://stackblitz.com/edit/angular-mpedfr?file=src%2Fapp%2Fapp.component.html

Answer 1

Теперь вы можете использовать глобальный контейнер с атрибутом cdkDropListGroup, в котором все дочерние контейнеры с атрибутом cdkDropList связаны друг с другом, нет необходимости добавлять все содержимое [cdkDropListConnectedTo]

<div cdkDropListGroup>
    <div cdkDropList>
        <div cdkDrag>Drag Me</div>
    </div>
    <div cdkDropList>
        <div cdkDrag>Drag Me Also</div>
    </div>
    ...
</div>

Answer 2

Получается DragDrops cdkDropListConnectedTo, подключающийся к разным зонам, например

[cdkDropListConnectedTo]="[inProgress, done]"

Полный пример: https://stackblitz.com/edit/angular-mpedfr