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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过删除目标组件的导航标签,在组件之间进行拖放列表传输相关的知识,希望对你有一定的参考价值。

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

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

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

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

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

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

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

enter image description here

答案

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()。如果组件已订阅更改,则行为将相同。

以上是关于通过删除目标组件的导航标签,在组件之间进行拖放列表传输的主要内容,如果未能解决你的问题,请参考以下文章

Vue Router 提供的标签组件

Java 自己的组件通过拖放进行可视化连接

Java - 如何拖放 JPanel 及其组件

React 组件之间的两种方式绑定

Java在列表中拖放图像

通过导航组件在底部导航片段之间传递数据