如何解决角形拖放相交例如表格中的行和列
我正在尝试使用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",{colName: "B"}
]
}
]
dropRow(row: any,event: CdkDragDrop<string[]>) {
moveItemInArray(row,event.previousIndex,event.currentIndex);
}
使用cdkDrag可以很容易地对“行”列表进行重新排序,但是我的问题是,“我应该如何对同一组件中的“列”进行重新排序?”
我怀疑不能使用cdkDropList,因为我不相信可以将第二个cdkDragHandle和cdkDropListDropped添加到此“表”中,因此对其他库的建议持开放态度,这些库可能会帮助我在Angular中实现相同的功能
解决方法
结果证明我弄错了,这是可能的。 StackBlitz:https://stackblitz.com/edit/angular-ivy-z3cpj2?
app.component.html
<table>
<thead>
<tr cdkDropList
cdkDropListOrientation="horizontal"
[cdkDropListData]="columns"
(cdkDropListDropped)="dropCol($event)">
<th></th>
<th *ngFor="let column of columns" cdkDrag>GRAB COL</th>
</tr>
</thead>
<tbody cdkDropList [cdkDropListData]="rows" (cdkDropListDropped)="dropRow($event)">
<tr cdkDrag *ngFor="let row of rows">
<td cdkDragHandle>GRAB ROW</td>
<td *ngFor="let cell of columns">{{ cell.colName + row.rowName }}</td>
</tr>
</tbody>
</table>
app.component.ts
rows = [
{
rowName : "1",columns : [
{colName: "A"},{colName: "B"}
]
},{
rowName : "2",{colName: "B"}
]
}
]
columns = this.rows.map(x => x.columns).reduce((reduce,val) => {return val},[]);
dropRow(event) {
moveItemInArray(this.rows,event.previousIndex,event.currentIndex);
}
dropCol(event) {
moveItemInArray(this.columns,event.currentIndex);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。