通过拖放到目标组件的导航标签上，组件之间的拖放列表传输

Question

我正在尝试弄清楚如何将一个列表中的元素拖放到 <div> 并让该项目更改列表。

目标是能够将项目从一个列表拖放到侧边栏导航的标签上，并将项目切换到该目标页面上的列表。

我尝试在 stackblitz 上实现一个非常简单的概念证明，但无济于事。

是否可以将项目拖放到给定的 div（即使是不显示列表的）并让该项目切换列表？

这里是 stackblitz 的链接：https://stackblitz.com/edit/angular-special-drop-zone

在 stackblitz 中，我试图能够将项目从 TODO 列表拖放到 DONE 标题中，并将它们添加到 DONE 列表中。

编辑：这是我正在尝试完成的 GIF。在侧导航中放入“积压”后，我希望它切换到积压列表。

Answer 1

TL;DR:

将所有cdkDrop* 属性添加到您希望能够放置的 div 中，只是不要呈现列表。确保它与可见列表共享相同的cdkDropListdata 属性。有关示例，请参见 stackblitz 链接。

---

我找到了两种方法来解决这个问题。两者都需要将放置区 <div> 视为独立的 cdkDropList。

1。使用cdkDropListConnectedTo

文档：https://stackblitz.com/edit/ng-cdkdroplistgroup

Stackblitz:CdkDropListConnectedTo Example

使用cdkDropListConnectedTo 将原始列表连接到不可见的“下拉”列表（这只是一个 div/标签）。

2。使用cdkDropListGroup

See Documentation

Stackblitz：CdkDropListGroup Example

在div 上使用cdkDropListGroup 指令，该指令包含您希望能够在其间拖放的所有列表。它们将自动连接，就像您在它们每个上都使用了 cdkDropListConnectedTo 一样，并带有它们所有的唯一名称。

---

要能够放置在标签上并使其最终出现在列表中，请遵循与上述相同的过程，让可见列表和标签共享相同的 cdkDropListdata 属性。

在某些情况下，这是不可能的，因为标签和可见列表可能位于不同的组件中，并且从数据服务或可观察对象中获取它们的数据。在这种情况下，您需要处理drop 事件，并自己更新列表，而不是仅仅使用transferArrayItem()。如果组件已订阅更改，则行为将相同。