Угловой 7 Перетащите n drop в сетку, не в состоянии перемещать панели между сеткой - PullRequest
Новая
       14

Угловой 7 Перетащите n drop в сетку, не в состоянии перемещать панели между сеткой

0 голосов
/ 27 февраля 2019

Я пробую Angular 7 Drag n Drop с сеткой начальной загрузки.

Внутри сетки у меня есть панели.

Вот код: 

<div class="container">
 <div class="row">

   <div class="col-md-4" cdkDropList>
      <div class="panel panel-primary" cdkDrag>
         <div class="panel-body">
            one
          </div>
      </div>
   </div>

   <div class="col-md-4" cdkDropList>
      <div class="panel panel-primary" cdkDrag>
         <div class="panel-body">
            two
          </div>
      </div>
   </div>

   <div class="col-md-4" cdkDropList>
      <div class="panel panel-primary" cdkDrag>
         <div class="panel-body">
            two
          </div>
      </div>
   </div>

 </div>
</div>

Я хочу иметь возможность перемещать панели и, возможно, сортировать их и помещать панель в пустые ячейки сетки.

Моя проблема заключается в том, что эти панели расположены внутри назначенных родительских элементов div, и я не могу поменять их местами

Как я могу получить это, чтобы я мог это сделать?

1 Ответ

0 голосов
/ 07 марта 2019

Угловой CDK Drag & Drop основан на перемещении элемента в массиве.И это то, что вы не делаете в своем примере.Чтобы это работало так, как вы описали.Вы должны выполнить следующие шаги.

Первый шаг:

В качестве первого шага вы должны создать @ViewChild, который получит все эти cdkDropLists.Массив, который будет содержать ваш panels.Последним будет свойство listsChecked. 

@ViewChildren('list') lists: QueryList<CdkDropList>;
listArray = [[{col: 4, text: 'one'}], [{col: 4, text: 'two'}], [{col: 4, text: 'two'}]];
private listsChecked: boolean = false;

Второй шаг:

Давайте изменим шаблон HTML, чтобы он перебирал созданный вами массивна первом этапе.Таким образом, HTML будет выглядеть следующим образом. 

<div class="container">
    <div class="row">
      <ng-container *ngFor="let listItem of listArray; let i = index">
        <div class="list col-md-4">
          <div class="list-item panel panel-primary" *ngFor="let item of listItem">
            <div class="panel-body">
              {{item.text}}
            </div>
          </div>
        </div>
      </ng-container>
    </div>
</div>

Третий шаг:

Чтобы иметь возможность перетаскивать и обновлять шаблон HTML из шага 2Во-первых, вы должны добавить cdkDropListGroup к .row.Затем добавьте [cdkDropListData]="listItem" к <div class="col-md-4"></div>, к тому же элементу добавьте также этот cdkDropList #list="cdkDropList", который используется для @ViewChild() с шага 1, снова к тому же элементу добавьте (cdkDropListDropped)="drop($event)", это будет вызывать метод всегда, когда выбросить предметТакже добавьте cdkDdrag в .panel .panel-primary.Шаблон должен выглядеть следующим образом: 

<div class="container">
   <div class="row" cdkDropListGroup>
      <ng-container *ngFor="let listItem of listArray; let i = index">
        <div class="list col-md-4" [cdkDropListData]="listItem" cdkDropList #list="cdkDropList"
             (cdkDropListDropped)="drop($event)">
          <div class="list-item panel panel-primary" *ngFor="let item of listItem" cdkDrag>
            <div class="panel-body">
              {{item.text}}
            </div>
          </div>
        </div>
      </ng-container>
    </div>
  </div>

Четвертый шаг:

К вашему *.component.ts добавить AfterViewChecked для орудий.В ngAfterViewChecked() добавьте этот код 

 ngAfterViewChecked() {
     if (this.lists.toArray().length > 0 && this.listsChecked === false) {
      this.listsChecked = true;
      for (let i = 0; i < this.lists.length; i++) {
        const array = [];
        for (let j = 0; j < this.lists.length; j++) {
          if(i !== j) {
            array.push(this.lists.toArray()[j]);
          }
        }
        this.lists.toArray()[i].connectedTo = array;
      }
    }
 }

Этот код будет проходить через все элементы с #list в вашем шаблоне и добавлять каждый cdkDropList кроме него самого к cdkDropconnectedTo <- это соединяет больше списковмежду друг другом.И добавьте метод <code>drop(). 

drop(event: CdkDragDrop<string[]>) {
     if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
 }

Это проверит, совпадает ли пункт назначения с предыдущим контейнером, и переместится по мере необходимости.drop() Я получил от Документация Angular Drag & Drop

Все должно работать, контейнеры все равно будут существовать как пустые столбцы.Я надеюсь, что это поможет вам.

...