Question

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

我怎样才能得到它？

Answer 1

角度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()，再次添加到同一元素中，添加{{1 }}这将始终在您删除项目时调用方法。还将cdkDdrag添加到(cdkDropListDropped)="drop($event)"。模板应该看起来像这样

.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>中将AfterViewChecked添加到工具中。在*.component.ts中添加此代码

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()

这将检查目的地是否与先前的容器相同，并根据需要移动。我从Angular Drag & Drop documentation获得的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); } }

一切正常，容器仍将以空col的形式存在。一世希望对您有帮助。

Angular 7拖动网格中的n下降无法在网格之间移动面板

1 个答案: