Question

通过遵循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个索引处只有一个项目。

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

Answer 1

经过对Angular CDK的研究和演示，我意识到cdk拖放不适合我的需要。

通过HTML 5拖放，我获得了预期的结果。

有关详细解决方案，请参见this link

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

1 个答案: