Angular CDK 拖放与垫选项卡组垂直
Angular CDK drag drop with mat tab group vertical
所以我创建了目前仅适用于选项卡的 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);
}
}
现在一切正常。
问题是我对水平和垂直标签有相同的 [id]="'list-'+index"。
为什么我这么蠢?
所以我创建了目前仅适用于选项卡的 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);
}
}
现在一切正常。
问题是我对水平和垂直标签有相同的 [id]="'list-'+index"。 为什么我这么蠢?