Вложенные сумки с тем же именем в Драгула - PullRequest
Новая
       28

Вложенные сумки с тем же именем в Драгула

0 голосов
/ 19 июня 2019

Я использую Dragula в Angular 6 для вложенного перетаскивания.Все выглядит хорошо, кроме, кроме - Невозможно переместить родительский узел, он работает с большинством внутренних дочерних элементов.

Обратите внимание, что решение не должно вводить какие-либо новые HTML-теги.Просто чтобы игнорировать HTML-теги, которые я использовал ng-container.Любая помощь приветствуется.

Вот демонстрация, которую я пробовал до сих пор -

https://stackblitz.com/edit/angular-dragula-drag-drop-example-gb6gp1?file=src/app/board/board.component.html

У меня есть такие данные, как - 

 {
      name: 'Group A',
      position: 0,
      items: [
        {
          name: 'Item A',
          position: 0,
          items: [
            {
              name: 'Item AAA',
              position: 0,
            },
            {
              name: 'Item BBBB',
              position: 1
            }
          ]
        },
        {
          name: 'Item B',
          position: 1
        },
        {
          name: 'Item C',
          position: 2
        }
      ]
    }

Ниже приведен HTML 

<div class="container" *ngFor="let group of groups">
    <ng-container *ngTemplateOutlet="t1;context:{data:group}"></ng-container>
</div>

<ng-template #t1 let-data="data">
    <div class="container" dragula="ITEMS" [(dragulaModel)]="data.items">
    <!-- <font class="handle">x</font> -->

    <span>
       <font class="handle">x</font>
        <ng-container *ngFor="let item of data.items">
            <ng-container *ngIf="item.items">
                <ng-container *ngTemplateOutlet="t1;context:{data:item}"></ng-container>
            </ng-container>
            <ng-container *ngIf="!item.items">
                <ng-container *ngTemplateOutlet="t2;context:{data:item}"></ng-container>
            </ng-container>
        </ng-container>
    </span>
    </div>
</ng-template>


<ng-template #t2 let-data="data">
    <span>
    <font class="handle">x</font>
          {{data.name}} -  {{data.position}}
    </span>
</ng-template>
...