样式由 CSS 完成(查看示例页面上的 CSS 选项卡)。我对其进行了调整以使用 mat-table:
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
我把它放在我的主要 styles.scss 文件中。
对于想知道如何在 mat-table 上实现拖放的任何人,您需要:
- 添加
cdkDropList
到mat-table
- 添加
(cdkDropListDropped)="onListDrop($event)"
到mat-table
- 添加
cdkDrag
到mat-row
onListDrop
看起来像:
onListDrop(event: CdkDragDrop<string[]>) {
// Swap the elements around
moveItemInArray(this.myArray, event.previousIndex, event.currentIndex);
}
moveItemInArray
是一个角材质函数。你可以导入它。