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

Here is the link to the code

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

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

I've tried to manage this rappresentation inside a ponente 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 () and with vanilla Javascript using API of Drag&Drop too (/…/…/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 ponent, 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?

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

Here is the link to the code https://stackblitz./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 ponent)

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

I've tried to manage this rappresentation inside a ponente 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/…/…/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 ponent, 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?

• javascript
• angular
• drag-and-drop

• Maybe this helps. Implementation with Material Tree: stackblitz./edit/… medium./briebug-blog/… – Ludwig Commented Dec 3, 2019 at 14:52

4 Answers 4

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./edit/angular-cdk-nested-drag-drop-tree-structure

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

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

Here is code effective for below points.

1. In List parent to parent drag/drop
2. In List inside one parent child to child drag/drop
3. In List one child from one parent to other parent drag/drop

https://stackblitz./edit/angular-ivy-hhnnke?file=src%2Fapp%2Fapp.ponent.html

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

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