通过删除目标组件的导航标签，在组件之间进行拖放列表传输

Posted 2021-04-03

我试图找出如何将一个元素从一个列表中删除到<div>并让该项目更改列表。

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

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

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

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

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

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

答案

TL;DR:

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

---

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

1.使用cdkDropListConnectedTo

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

Stackblitz：CdkDropListConnectedTo Example

使用cdkDropListConnectedTo将原点列表连接到不可见的'drop'列表（这只是一个div / label）。

2.使用cdkDropListGroup

See Documentation

Stackblitz：CdkDropListGroup Example

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

---

为了能够放在标签上并将其放在列表中，请按照与上面相同的过程，使可见列表和标签共享相同的cdkDropListdata属性。

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