Angular 8嵌套拖放

Question

不幸的是，我无法找到一个常见问题的解决方案。

这里是代码https://stackblitz.com/edit/angular-ygwaxs的链接

我有这种情况：从服务器我得到一个 json 树结构（在示例中，组件内部直接有一个简化）

有空节点，但每个人都声明了他们的子数组。

我尝试使用 html 级别的 ng-template 和 ng-container 来管理组件内的这种 rappresentation，这很有效。

问题是我需要使用拖放来对节点进行排序。

具体来说，每个部分都可以是子或父，因此，每个部分都可以拖放。

我尝试使用 Angular Material 8 CDK Drag & Drop (https://material.angular.io/cdk/drag-drop/overview) 和使用 Drag&Drop API 的 vanilla Javascript (https://developer.mozilla.org/…/…/API/HTML_Drag_and_Drop_API) 来实现它，但是，如果在第一种情况，嵌套拖放的事实无助于解决解决方案，在第二种情况下，我已经进行了测试，但是在 Angular 组件内部，似乎不接受用于 drop (drop) 的事件绑定；当我尝试在标签放置区域内拖动一个部分时，光标会变为无放置状态。

谁能帮帮我？

Answer 1

我最近也遇到了树结构中嵌套拖放/排序项目的问题。

我的解决方案是通过 cdkDropListConnectedTo 链接不同的 cdkDropLists，并通过 cdkDrag 项目上的 cdkDragMoved 事件获取目标放置位置。

演示：https://stackblitz.com/edit/angular-cdk-nested-drag-drop-tree-structure

Answer 2

你可以使用 sortable js Nested Sortables：https://sortablejs.github.io/Sortable/#nested

还有一个可排序js的角度实现： https://github.com/SortableJS/ngx-sortablejs

Answer 3

有一篇关于可排序、嵌套、拖放列表的文章。 它还包括一个仅使用 @angular/cdk

的工作 stackblitz 演示

https://sienakasa.medium.com/angular-cdk-nested-drag-and-drop-d849365a7ca9