CODEWITHSUNDEEP
angularangular-materialangular-cdkmat-tab
cvekaso
cvekaso

Reputation: 865

Angular CDK drag drop with mat tab group vertical

So i created mat tab group that currently only work for tabs, but sub -tabs have problem that i will show you in gif. Only 1, 2 sub tab can't be drag and dropped on them all other cases are working.

https://gfycat.com/corruptwarmheartedamericanavocet

I tried everything, clear css change css but nothing is working, always event container and previousContainer are same -> that dragged element.

<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);
    }
  }

Upvotes: 3

Views: 3414

Answers (2)

Irfanullah Jan
Irfanullah Jan

Reputation: 3892

I would like to suggest a workaround because I didn't like the kind-of-hacky approach which connects the single-item lists together.

The workaround is to swap the MatTabs component with ButtonToggle, and it just seamlessly works.

<mat-button-toggle-group
  cdkDropList
  (cdkDropListDropped)="onTabDragDrop($event)"
  cdkDropListOrientation="horizontal"
>
  <mat-button-toggle
    *ngFor="let tab of tabs"
    cdkDrag
  >
    {{ tab.label }}
  </mat-button-toggle>
</mat-button-toggle-group>

onTabDragDrop() is just the usual function that makes use of moveItemInArray util provided by Angular CDK.

Upvotes: 0

cvekaso
cvekaso

Reputation: 865

Everything is working now.

The problem was that I had the same [id]="'list-'+index" for horizontal and vertical tabs. Why am I so damn stupid?

Upvotes: 3

Related Questions