在 Angular 中，您将如何在 dom 中移动组件？

Question

开始学习Angular，所以这可能有一个简单的答案：）

无需具体代码。 我正在寻求帮助，朝着正确的方向前进。

开发一个小购物清单应用程序。 关键是，当您在杂货店找到东西时，您单击该物品，它会在“页面的已找到物品区域”中向下移动，然后单击并移动到图片下方

自动取款机。 蓝色组件实际上只是模板中的按钮，但实际上可以是任何东西。 它们是“杂货组件”的实例，嵌套在“购物清单”组件中，使用 ngFor 构建。

在我看来，使用单个数组并对其进行过滤是有意义的。 我已经尝试过了，它有点工作，但是一旦初始化完成，我就无法让它移动。 所以不知何故，当我单击杂货组件时，我需要告诉购物清单组件将其移到 dom 的“找到的杂货”部分中。 如果您想将其向上移动，反之亦然。

任何点击或评论都会有所帮助。

Answer 1

CDK Drag Drop 可能对您的情况有用

Answer 2

你测试过“Dragula”吗？ 这里

如果您使用以下选项更改方向，您不仅可以进行垂直拖放，还可以进行水平拖放：

direction:'horizontal'