1

I'm using Angular & Material 14 and have drag & drop in my application. Everything works, but when I transfer a child item to a child-list of another parent object, I need a way to know which parent object it was.

This is the object structure:

[
    {
        "name": "Parent Container 1",
        "children": [
            {
                "name": "Child 1",
                "parentName":  "Parent Container 1"
            },
            {
                "name": "Child 2",
                "parentName":  "Parent Container 1"
            },
            {
                "name": "Child 3",
                "parentName":  "Parent Container 1"
            }
        ]
    },
    {
        "name": "Parent Container 2",
        "children": [
            {
                "name": "Child 1",
                "parentName":  "Parent Container 2"
            },
            {
                "name": "Child 2",
                "parentName":  "Parent Container 2"
            },
            {
                "name": "Child 3",
                "parentName":  "Parent Container 2"
            }
        ]
    }
]

This is the template:

<!-- Parent Container -->
<div class="parent-container"
    [id]="articleDropListId + i"
    cdkDropList
    [cdkDropListData]="parent.children"
    (cdkDropListDropped)="drop($event)">

    <!-- Children -->
    <div class="children" *ngFor="let child of parent.children" cdkDrag>

        <!-- Child -->
        <div class="child">
            {{child.name}}
        </div>
    </div>
</div>

And this is the function I use.

public drop(event: CdkDragDrop<ChildModel[]>): void {
    if (event.previousContainer !== event.container) {
        // if transfered between two parent containers, I need the name of the new parent container
        transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
        const movedChild: ChildModel = event.container.data[event.previousIndex];
        this.apiService.moveChild(movedChild, >>parentName<<);
    } else if(event.previousContainer === event.container) {
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        const movedChild: ChildModel = event.previousContainer.data[event.previousIndex];
        this.apiService.moveChild(movedChild, >>parentName<<);
    }
}

So I first move the child with the provided methods from @angular/cdk/drag-drop and afterwards I have to make a request to the server and send the moved child object as well as the new parentName of the current parent.

Is there anyway to retrieve the current parent object from the drop event?

LukyFoggy
  • 519
  • 8
  • 31
  • Can u create a demo code on stackblitz.com – Shashank Vivek Sep 29 '22 at 10:45
  • 1
    in `[cdkDropListData]` you can use "whatever", so, e.g. you can use `[cdkDropListData]="parent"` and to transfer elements of the array use `event.previousContainer.data.children` and `event.Container.data.children`. NOTE: the function transferArrayItems and moveItemInArray are only functions to change two arrays, you can see the functions in [github](https://github.com/angular/components/blob/main/src/cdk/drag-drop/drag-utils.ts) – Eliseo Sep 29 '22 at 11:19
  • @Eliseo I haven't thought about that, but I'll try it. Thank you – LukyFoggy Oct 03 '22 at 13:12

0 Answers0