Drag-Drop 通过放置在目标组件的导航标签上来在组件之间进行列表传输
Drag-Drop list transfer between components by dropping on navigation label of destination component
我正在尝试弄清楚如何将一个列表中的元素拖放到 <div> 并让该项目更改列表。
目标是能够将一个列表中的项目拖放到侧边栏导航中的标签上，并将该项目切换到该目标页面上的列表。
我曾尝试在 stackblitz 上实施一个非常简单的概念验证，但无济于事。
是否可以将项目拖放到给定的 div（即使是不显示列表的项目）并让该项目切换列表？
这是 stackblitz 的 link：https://stackblitz.com/edit/angular-special-drop-zone
在 stackblitz 中，我试图将 TODO 列表中的项目拖放到 DONE header 并将它们添加到 DONE 列表。
编辑：这是我要完成的工作的 GIF。在侧面导航中放到 'Backlog' 后，我希望它切换到积压列表。
长话短说：
将所有 cdkDrop* 属性添加到您希望能够放置的 div 中，只是不要呈现列表。确保它与可见列表共享相同的 cdkDropListdata 属性。有关示例，请参见 stackblitz 链接。
我找到了 2 种方法来解决这个问题。两者都需要将拖放区 <div> 视为独立的 cdkDropList。
1。使用 cdkDropListConnectedTo
文档：https://stackblitz.com/edit/ng-cdkdroplistgroup
Stackblitz：CdkDropListConnectedTo Example
使用 cdkDropListConnectedTo 将原始列表连接到不可见的 'drop' 列表（这只是一个 div/label）。
2。使用 cdkDropListGroup
Stackblitz：CdkDropListGroup Example
在 div 上使用 cdkDropListGroup 指令，其中包含您希望能够 drag/drop 的所有列表。它们将自动连接，就好像您对它们中的每一个都使用了 cdkDropListConnectedTo 一样，它们的名称都是唯一的。
为了能够拖放到标签上并使其最终出现在列表中，请遵循与上述相同的过程，让可见列表和标签共享相同的 cdkDropListdata 属性。
在某些情况下，这是不可能的，因为标签和可见列表可能位于不同的组件中，并从数据服务或可观察对象中获取数据。在这种情况下，您需要处理 drop 事件，并自行更新列表，而不是仅使用 transferArrayItem()。如果组件已订阅更改，则行为将相同。
我正在尝试弄清楚如何将一个列表中的元素拖放到 <div> 并让该项目更改列表。
目标是能够将一个列表中的项目拖放到侧边栏导航中的标签上，并将该项目切换到该目标页面上的列表。
我曾尝试在 stackblitz 上实施一个非常简单的概念验证，但无济于事。
是否可以将项目拖放到给定的 div（即使是不显示列表的项目）并让该项目切换列表？
这是 stackblitz 的 link：https://stackblitz.com/edit/angular-special-drop-zone
在 stackblitz 中，我试图将 TODO 列表中的项目拖放到 DONE header 并将它们添加到 DONE 列表。
编辑：这是我要完成的工作的 GIF。在侧面导航中放到 'Backlog' 后，我希望它切换到积压列表。
长话短说：
将所有 cdkDrop* 属性添加到您希望能够放置的 div 中，只是不要呈现列表。确保它与可见列表共享相同的 cdkDropListdata 属性。有关示例，请参见 stackblitz 链接。
我找到了 2 种方法来解决这个问题。两者都需要将拖放区 <div> 视为独立的 cdkDropList。
1。使用 cdkDropListConnectedTo
文档：https://stackblitz.com/edit/ng-cdkdroplistgroup
Stackblitz：CdkDropListConnectedTo Example
使用 cdkDropListConnectedTo 将原始列表连接到不可见的 'drop' 列表（这只是一个 div/label）。
2。使用 cdkDropListGroup
Stackblitz：CdkDropListGroup Example
在 div 上使用 cdkDropListGroup 指令，其中包含您希望能够 drag/drop 的所有列表。它们将自动连接，就好像您对它们中的每一个都使用了 cdkDropListConnectedTo 一样，它们的名称都是唯一的。
为了能够拖放到标签上并使其最终出现在列表中，请遵循与上述相同的过程，让可见列表和标签共享相同的 cdkDropListdata 属性。
在某些情况下，这是不可能的，因为标签和可见列表可能位于不同的组件中，并从数据服务或可观察对象中获取数据。在这种情况下，您需要处理 drop 事件，并自行更新列表，而不是仅使用 transferArrayItem()。如果组件已订阅更改，则行为将相同。