angularangular-materialangular-cdkangular-dragdrop

Angular drag and drop with nested not working as intended

I'm having an issue that CDK Drag and Drop is not working as how I want it to be. There is one scenario that I can't get it working and that is moving and IT (green object) inside a different (green object) as you can see in my example below the my Sub cdkDropList is never recognized as a dropArea.

I have tried changing my cdkDropListConnectedTo multiple times but I never get it to work.

I already googled online for multiple solutions and I can't find what I'm doing wrong.

Here below you can see my example https://stackblitz.com/edit/angular-cdk-nested-drag-drop-tree-structure-gkt1kk?file=src%2Fapp%2Fapp.component.ts

This is how the example starts a

t1

and this is what I want to happen if I were to drag the IT1 into the sub of IT3

enter image description here

Solution

  • i think you just forgot the

        [cdkDropListConnectedTo]="getConnectedListForItemsAndCategories()"

    on the innermost of the 3 levels to allow moving them in

    https://stackblitz.com/edit/angular-cdk-nested-drag-drop-tree-structure-zvsafw but you also need to add the drop function to "persist" the changes afterwards. for that cdk provides 2 functions but you need the containers to reference the arrays (which can be added with )

    [cdkDropListData]=""