Question

我正在寻找一个嵌套的递归列表，可以拖放操作。我要完成的工作是将内部嵌套列表中的项目移到任何其他嵌套列表中或移入其自己的组中。问题是我一直在这里查看Stack中的许多不同示例和问题，但是没有一个成功的想法可以使它起作用。

以下是我看过的一些问题和示例：

stackblitz

Stackoverflow #1

Stackoverflow #2

Stackoverflow #3

因此，您可以了解一下我的数据示例：

每个地区可以生孩子的地方，每个孩子也可以生孩子。因此，这将创建嵌套数据。

在Angular组件中，每次查看此示例时，我都使用递归来重新创建级别：

component.ts：

dropGroup(event: CdkDragDrop<string[]>) {
  let area = event.item.data;
  console.log('group', area, event)
}

dropItem(event: CdkDragDrop<string[]>) {
  let area = event.item.data;
  console.log('item', area, event)
}

component.html：

<div cdkDropList #parentList="cdkDropList" (cdkDropListDropped)="dropGroup($event)" [cdkDropListData]="areas">
  <div cdkDropListGroup class="area-wrapper" *ngFor="let area of areas;" cdkDrag [cdkDragData]="area">
    <div class="area-list">
      <div [ngClass]="area.children.length ? 'area-toggle' : 'area'" [style.paddingLeft.px]="area.level > 1 ? area.level*15 : 0">
        <div class="top-wrapper">
          <div class="top-toggle" *ngIf="area.children.length">
            <mat-icon (click)="showChildren(area)" *ngIf="!area.showToggle">keyboard_arrow_right</mat-icon>
            <mat-icon (click)="showChildren(area)" *ngIf="area.showToggle">keyboard_arrow_down</mat-icon>
          </div>
          <span class="area-name">{{ area.name }}</span>
        </div>
        <div class="area-buttons">
          <button class="area-button area-add" mat-icon-button (click)="addNewItem(area)">
            <mat-icon>add</mat-icon>
          </button>
          <button class="area-button area-edit" mat-icon-button (click)="editArea(area)">
            <mat-icon>edit</mat-icon>
          </button>
          <button class="area-button area-delete" mat-icon-button (click)="deletingArea($event, area, area.name)">
            <mat-icon>delete</mat-icon>
          </button>
          <button cdkDragHandle class="drag-handle" mat-icon-button>
            <mat-icon>drag_handle</mat-icon>
          </button>
        </div>
      </div>
      <div class="toggle-children" *ngIf="area.showToggle" cdkDropList (cdkDropListDropped)="dropItem($event)">
        <sp-area-list
        *ngIf="area.children"
        [areas]="area.children"
        (deleteArea)="deletingArea($event, area)"
        (addingArea)="addNewItem($event)"
        (editingArea)="editArea($event)">
        </sp-area-list>
      </div>
    </div>
  </div>
</div>

每次我尝试不同的示例时，拖放控制台仅显示该项目从其开始的容器，而不是其移动到的位置...没有示例在起作用或帮助我解决了要完成的任务。

有人通过CDK拖放成功嵌套嵌套递归列表吗？

感谢您的帮助！

Angular6递归列表拖放CDK

0 个答案: