通过遵循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个索引处只有一个项目。
我不确定我做得是否正确。任何帮助,将不胜感激。
答案 0 :(得分:1)