Angular CDK 拖放与垫选项卡组垂直

Question

所以我创建了目前仅适用于选项卡的 mat 选项卡组，但子选项卡有问题，我将在 gif 中向您展示。只有 1、2 个子选项卡不能拖放到它们上面，所有其他情况都有效。

https://gfycat.com/corruptwarmheartedamericanavocet

我尝试了所有方法，清除 css 更改 css 但没有任何效果，事件容器和 previousContainer 始终相同 -> 拖动的元素。

<mat-tab-group vertical flex="1" class="vertical-mat-tab" #matGroupSubTab >
  <mat-tab *ngFor = "let subtab of arraySubtabs; let index = index">
    <ng-template matTabLabel>
      <div class="dropBox" [id]="'list-'+index" 
          cdkDropList
          cdkDragRootElement=".mat-tab-label"
          cdkDropListOrientation="vertical"
          (cdkDropListDropped)="dropSubTab($event)" 
          [cdkDropListConnectedTo]="getAllListSubTabConnections(index)">
        <div cdkDragBoundary=".mat-tab-labels" cdkDrag>{{ subtab.name }}</div>   
      </div>   
    </ng-template>
  </mat-tab>
</mat-tab-group>

  getAllListSubTabConnections (index) {
    const connections = [];
    for (let i = 0; i < this.arraySubtabs.length; i++) {
      if (i !== index) {
        connections.push('list-' + i);
      }
    }
    return connections;
  }

  dropSubTab (event: CdkDragDrop<string[]>) {
    const previousIndex = parseInt(event.previousContainer.id.replace('list-',''), 10);
    const newIndex = parseInt(event.container.id.replace('list-',''), 10);
    if (!Number.isNaN(previousIndex) && !Number.isNaN(newIndex) &&
      previousIndex !== undefined && newIndex !== undefined && previousIndex !== newIndex) {
      moveItemInArray(this.arraySubtabs, previousIndex, newIndex);
    }
  }

Answer 1

现在一切正常。

问题是我对水平和垂直标签有相同的 [id]="'list-'+index"。为什么我这么蠢？

Angular CDK 拖放与垫选项卡组垂直

Angular CDK drag drop with mat tab group vertical

angular

angular-material

angular-cdk

mat-tab