Angular 7在网格中拖放无法在网格之间移动面板答案

【问题标题】：Angular 7 Drag n drop in grid not able to move panels between gridAngular 7在网格中拖放无法在网格之间移动面板
【发布时间】：2019-03-08 16:33:49
【问题描述】：

我正在尝试使用引导网格的 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 中，我无法交换它们

我怎样才能得到它以便我能做到这一点？

【问题讨论】：

标签： angular angular7 angular-cdk

【解决方案1】：

Angular CDK 拖放基于数组中的移动项目。这就是你在你的例子中没有做的事情。以您描述的方式使其工作。您应该按照以下步骤操作。

第一步：

作为第一步，您应该创建一个@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>

第三步：

为了能够从步骤 2 中拖放更新 HTML 模板。首先，您应该将 cdkDropListGroup 添加到 .row。接下来将[cdkDropListData]="listItem" 添加到<div class="col-md-4"></div>，将这个cdkDropList #list="cdkDropList" 添加到第1 步中的@ViewChild()，再次添加到同一个元素，添加(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 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);
    }
 }

这将检查目的地是否与之前的容器相同，并根据需要移动。我从Angular Drag & Drop documentation得到的drop()

一切正常，容器仍将作为空列存在。我希望对你有帮助。

【讨论】：