Angular 8 嵌套拖放

Angular 8 Nested Drag And Drop

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

这里是 link 代码 https://stackblitz.com/edit/angular-ygwaxs

我有这样的场景：我从服务器得到了一个 json 树结构（在这个例子中，组件内部直接进行了简化）

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

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

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

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

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

谁能帮帮我？

你可以使用 sortable js 嵌套排序：https://sortablejs.github.io/Sortable/#nested

还有一个angular sortable js的实现： https://github.com/SortableJS/ngx-sortablejs

我最近也遇到了树结构中嵌套 dragdrop/sorting 项目的问题。

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

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

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

的工作 stackblitz 演示

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

下面是对以下几点有效的代码。