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

Posted 2023-05-08

【中文标题】Angular 8拖放 - 将文件或文件夹拖放到另一个文件夹中

【英文标题】：Angular 8 Drag and Drop - dropping file or folder into an another folder

【发布时间】：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 个索引处只有一个项目。

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

【参考方案1】：

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

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

详细解决方法请参考this link