Angular 8拖放 - 将文件或文件夹拖放到另一个文件夹中答案

【问题标题】：Angular 8 Drag and Drop - dropping file or folder into an another folderAngular 8拖放 - 将文件或文件夹拖放到另一个文件夹中
【发布时间】：2020-02-10 18:15:12
【问题描述】：

通过遵循 Angular CDK 文档，我可以轻松地将内容拖放到同一个列表（一维）或另一个列表中。

但是，我试图将一个项目（文件夹/链接）放入同一列表（多维）中的另一个项目（文件夹）中。

对象数组 - 例如。

[
  {
    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"
  }
]

在我的结构中，所有有孩子的对象都是文件夹，叶节点是链接。叶节点隐藏在父文件夹中。因此，它在浏览器上制定了一个精确的目录结构。

现在，我想将 Beta 对象移动到 Alpha 中，以便将其附加到 Alpha 的子代。这意味着每个项目都可以放入所有其他可见文件夹中。

我尝试将每个项目创建为cdkDropList，以便可以将另一个项目拖入其中。

示例代码，

<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>

在放置事件时，它会正确传递拖动的项目数据。但是，我怎样才能得到被丢弃容器的 id 呢？在事件数据中，previousIndex 和 currentIndex 都为 0，因为每个节点都是不同的列表。因此，每个列表在第 0 个索引处只有一个项目。

我不确定我是否做得正确。任何帮助，将不胜感激。

【问题讨论】：

标签： angular drag-and-drop angular-material angular-cdk

【解决方案1】：

在对 Angular CDK 进行了一些研究和演示后，我意识到 cdk 拖放并不适合我的需要。

我通过 HTML 5 拖放实现了预期的结果。

详细解决方法请参考this link

【讨论】：