我正在尝试使用 cdkDragDrop 实现两个相交的拖放。虽然我更愿意整体避免使用表格,但我创建了一个表格是为了(希望)更容易解释。
链接到 StackBlitz:https ://stackblitz.com/edit/angular-ivy-4bcutu ?
app.component.html
<table cdkDropList (cdkDropListDropped)="dropRow(rows, $event)" >
<tr>
<td></td>
<td *ngFor="let column of rows">
<div>GrabCol</div>
</td>
<td>
</tr>
<tr *ngFor="let row of rows;" cdkDrag>
<td cdkDragHandle>
<div>GrabRow</div>
</td>
<td *ngFor="let column of row.columns">
<div>{{column.colName + row.rowName}}</div>
<td>
</tr>
</table>
app.component.ts
rows = [
{
rowName : "1",
columns : [
{colName: "A"},
{colName: "B"}
]
},
{
rowName : "2",
columns : [
{colName: "A"},
{colName: "B"}
]
}
]
dropRow(row: any, event: CdkDragDrop<string[]>) {
moveItemInArray(row, event.previousIndex, event.currentIndex);
}
使用 cdkDrag 重新排序“行”列表非常简单,但我的问题是,“我该如何重新排序同一组件中的“列”?
我的怀疑是 cdkDropList 不能使用,因为我不相信我可以将第二个 cdkDragHandle 和 cdkDropListDropped 添加到这个“表”中,因此对可能帮助我在 Angular 中实现相同目标的替代库的建议持开放态度。