Angular 8 Drag and Drop - dropping file or folder into an another folder

Question

By following the Angular CDK documentation, I could easily drag and drop things into the same list (one dimensional) or another list.

However, I am trying to drop an item (folder/link) into another item (folder) within the same list (multi-dimensional).

An array of objects - ex.

[
  {
    name: "Alpha",
    id: "Alpha",
    children: [
      {
        name: "Alpha 1",
        id: "Alpha-1",
        children: [
          {
            name: "Alpha 1.1",
            id: "Alpha-1.1"
          },
          {
            name: "Alpha 1.2",
            id: "Alpha-1.2"
          }
        ]
      },
      {
        name: "Alpha 2",
        id: "Alpha-2"
      },
      {
        name: "Alpha 3",
        id: "Alpha-3",
        children: [
          {
            name: "Alpha 3.1",
            id: "Alpha-3.1"
          },
          {
            name: "Alpha 3.2",
            id: "Alpha-3.2"
          }
        ]
      }
    ]
  },
  {
    name: "Beta",
    id: "Beta"
  }
]

In my structure, all objects who have children are the Folders, and leaf nodes are Links. Leaf nodes are hidden inside the parent folder. So, it formulates an exact directory like structure on the browser.

Now, I want to move Beta object into Alpha, so that it can be appended to the children of Alpha. That means each item can be dropped into all other visible folders.

I tried creating each item as cdkDropList, so that another item can be dragged into it.

Sample code,

<mat-nav-list>
  <mat-list-item *ngFor="let item of getReportItems() | reportfilter:filterArg; let i = index" [attr.data-index]="i"
cdkDrag 
[(cdkDragData)]="item"
cdkDragLockAxis="y" 
cdkDragBoundary="mat-nav-list"
cdkDropList
(cdkDragDropped)="drop($event)">
    <a href="javascript:void(0)" class="item-wrapper {i}" (click)="onItemSelected(item)">
        <mat-icon *ngIf="item.children" mat-list-icon>folder</mat-icon>
        <i *ngIf="!item.children" mat-list-icon class="far fa-file-alt"></i>
        <span mat-line [ngClass]="{'objectiveClass': !item.children}">
           {{ item.name }}
        </span>
    </a>
  </mat-list-item>
</mat-nav-list>

On drop event, it correctly passes dragged item data. However, how can I get the id of the dropped container? In event data, I have previousIndex and currentIndex both are 0 because each node is a different list. Hence each list only has one item at the 0th index.

I'm not sure if I'm doing correctly. Any help would be appreciated.

Nijesh Hirpara Nijesh Hirpara · Accepted Answer · 2019-10-22T03:51:13

After some research and demo of Angular CDK, I realized that cdk drag and drop is not suitable for my need.

I achieved the desired result with HTML 5 Drag & Drop.

For detailed solution refer this link

Angular 8 Drag and Drop - dropping file or folder into an another folder

1 Answers