Angular6 рекурсивный список перетаскивания CDK - PullRequest
Новая
       28

Angular6 рекурсивный список перетаскивания CDK

2 голосов
/ 15 мая 2019

Я хочу получить вложенный рекурсивный список, работающий в режиме перетаскивания. Я пытаюсь сделать так, чтобы элемент из внутреннего вложенного списка мог переместиться в любой другой вложенный список или в свою собственную группу. Проблема в том, что я рассмотрел несколько различных примеров и вопросов из Stack здесь, и не было успешной идеи, чтобы заставить это работать.

Вот некоторые вопросы и примеры, на которые я смотрел:

stackblitz

Stackoverflow # 1

Stackoverflow # 2

Stackoverflow # 3

Итак, у вас есть идея, вот пример моих данных: data

Там, где в каждом Районе могут быть дети, у каждого ребенка также могут быть дети. Так что это создает вложенные данные.

В моем угловом компоненте я использую рекурсию для воссоздания уровней каждый раз, проверяя этот пример:

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?

Спасибо за вашу помощь!

...