Angular:拖放树 - 自定义

Question

据我了解，新的 Angular 7 提供了拖放功能。我搜索了有关 DnD 的 Tree 组件，但没有找到与树相关的内容。

我在 Stackblitz 上找到的一个工作示例.对比drag'ndrop功能总结here解决方案看起来很清醒。一个更好的样本与 ngx-tree-dnd 有关.尽管如此，因为我想坚持 Material 一些 q 出现:

如何让普通的 Angular 树有一些类似的重影效果？即在拖动时显示节点内容。

如果我将节点放在同一级别或更深/更高的级别，是否有一种方法可以更好地直观地显示它？因为在当前的显示中几乎无法识别移动到哪个级别

如何包含一些动画？

Answer 1

在对代码进行了一些调查和摸索之后，我终于找到了如何让它变得更好的方法。我在 StackBlitz 上发布了我的解决方案以防其他人想要进行额外的调整。

我修复的主要问题:

用于放置的图像设置为空 - 不知道为什么

我增加了拖放区域 - 所以它现在也覆盖了边距(填充)

我为选择开始的节点着色

可以在 CSS 中轻松调整颜色

我试图解决性能问题。一种方法是使用数字而不是字符串。但我想可能会有额外的改进。

我发现关于 DnD 的主要事情是大部分是纯 JS 代码。对 Angular 的细节没有太多的说明。

欢迎提出改进建议。