Angular 8 Nested Drag And Drop

Question

unfortnually I can't find a solution in a common problem.

Here is the link to the code https://stackblitz.com/edit/angular-ygwaxs

I've got this scenario: from the server I got a json tree structure (in the example there's a semplification directly inside the component)

There are empty nodes, but everyone got their children array declared.

I've tried to manage this rappresentation inside a componente using at html level ng-template and ng-container and that's work.

The problem is that I need to use drag and drop for sorting nodes.

In the specific, every section can be child or parent so, every section can be draggable and droppable.

I've tried to implemet it with the Angular Material 8 CDK Drag & Drop (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) but, if in the first case the fact of having nested drag and drop do not help to work the solution, in the second one, I've got tests but inside of Angular component, the event bind for drop (drop) doesn't seem to be accepted; when I try to drag a section inside a tag dropzone the cursor change in no-drop.

Anyone can help me?

Answer 1

I also had a problem with nested dragdrop/sorting items in a tree structure recently.

The solution for me was to link the different cdkDropLists via cdkDropListConnectedTo and to get the target drop position through the cdkDragMoved event on the cdkDrag items.

Demo: https://stackblitz.com/edit/angular-cdk-nested-drag-drop-tree-structure

Answer 2

you could use sortable js Nested Sortables: https://sortablejs.github.io/Sortable/#nested

There is also an angular implemantation of sortable js: https://github.com/SortableJS/ngx-sortablejs

Answer 3

There's an article for sortable, nested, drag&drop lists. It also includes a working stackblitz demo using only @angular/cdk

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