Angular 8 Drag and Drop - удаление файла или папки в другую папку - PullRequest
Новая
       58

Angular 8 Drag and Drop - удаление файла или папки в другую папку

1 голос
/ 14 октября 2019

Следуя документации 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>

При событии сброса это правильнопередает данные перетаскиваемого элемента. Тем не менее, как я могу получить идентификатор отброшенного контейнера? В данных событий у меня есть previousIndex и currentIndex, оба равны 0, потому что каждый узел представляет собой отдельный список. Следовательно, у каждого списка есть только один элемент в 0-м индексе.

Я не уверен, правильно ли я делаю. Любая помощь будет оценена.

1 Ответ

1 голос
/ 22 октября 2019

После некоторых исследований и демонстрации Angular CDK я понял, что cdk drag and drop не подходит для моих нужд.

Я достиг желаемого результата с помощью перетаскивания HTML 5.

Подробное решение см. по этой ссылке

...