要解决Angular Material拖放项目在展开面板之间不起作用的问题,可以按照以下步骤进行:
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatExpansionModule } from '@angular/material/expansion';
@NgModule({
...
imports: [
...
DragDropModule,
MatExpansionModule
],
...
})
export class AppModule { }
cdkDropList
指令,并设置cdkDropListData
属性为一个空数组。这样可以将展开面板容器标记为一个可接受拖放项目的区域。
cdkDrag
指令,并设置cdkDragData
属性为面板的唯一标识。这样可以将展开面板标记为可拖动的项目。
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
...
})
export class YourComponent {
panels = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
];
drop(event: CdkDragDrop) {
moveItemInArray(this.panels, event.previousIndex, event.currentIndex);
}
}
这样,你就可以在展开面板之间实现拖放功能了。请注意确保在展开面板容器上使用cdkDropListGroup
指令,以便将其标记为一个拖放组,这样才能在组件中实现正确的拖放逻辑。