问题描述
我们的目标是制作一个全宽的 dropzone。我可以在其中放置“小部件”并在放置区周围自由拖动它们。但不同的是,我也可以删除列表小部件,在其中我也可以删除其他小部件..
所以我有这个stackblitz 使用代码,this video 显示奇怪的行为
有什么帮助吗? 我可以删除 cdkdroplist 指令并将所有内容假定为可拖动项,但会丢失元素上的列表功能...
同样的问题guy
app.component.html
<div
cdkDropList
id="todo"
[cdkDropListData]="todo"
[cdkDropListConnectedTo]="widgetIds"
class="example-list board"
(cdkDropListDropped)="drop($event)">
<div class="example-Box widget item{{item.id}}"
id="item{{item.id}}"
*ngFor="let item of todo"
cdkDrag
(cdkDragreleased)="cdkDragreleased($event,item)"
[cdkDragData]="item"
[ngStyle]="{
'transform': 'translate3d('+ item.dragPosition.x +'px,'+ item.dragPosition.y +'px,'+ item.dragPosition.z +'px)'
}">{{item.label}}</div>
</div>
<div class="example-container widget widget-a">
<h2>In Progress</h2>
<div
cdkDropList
id="inprogress"
[cdkDropListData]="inprogress"
[cdkDropListConnectedTo]="widgetIds"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-Box item{{item.id}}"
id="item{{item.id}}"
*ngFor="let item of inprogress"
cdkDrag
(cdkDragreleased)="cdkDragreleased($event,item)"
[cdkDragData]="item">{{item.label}}</div>
</div>
</div>
<div class="example-container widget widget-b">
<h2>Done</h2>
<div
cdkDropList
id="done"
[cdkDropListData]="done"
[cdkDropListConnectedTo]="widgetIds"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-Box item{{item.id}}"
id="item{{item.id}}"
*ngFor="let item of done"
cdkDrag
(cdkDragreleased)="cdkDragreleased($event,item)"
[cdkDragData]="item">{{item.label}}</div>
</div>
</div>
app.component.ts
export class AppComponent {
widgetIds = ['todo','inprogress','done'];
todo = [
{ id: 1,label: 'Item 1',dragPosition: { x: 45,y: 549,z: 0 } },{ id: 2,label: 'Item 2',dragPosition: { x: 190,y: 236,{ id: 5,label: 'Item 5',dragPosition: { x: 93,y: 142,z: 0 } }
];
inprogress = [
{ id: 3,label: 'Item 3',dragPosition: { x: 0,y: 0,{ id: 6,label: 'Item 6',{ id: 7,label: 'Item 7',z: 0 } }
];
done = [
{ id: 4,label: 'Item 4',{ id: 8,label: 'Item 8',z: 0 } }
];
constructor() {}
drop(event: CdkDragDrop<any>) {
if (event.prevIoUsContainer === event.container) {
moveItemInArray(
event.container.data,event.prevIoUsIndex,event.currentIndex
);
} else {
transferArrayItem(
event.prevIoUsContainer.data,event.container.data,event.currentIndex
);
}
}
cdkDragreleased(event: CdkDragrelease<any>,item) {
const widDomElement: any = document.querySelector(`.item${item.id}`);
const el: any = document.querySelector(`.cdk-drag-preview.item${item.id}`);
let arrT = el.style.transform
.replaceAll('px','')
.replaceAll(' ','')
.replaceAll(')','')
.replaceAll('translate3d(','')
.split(',');
item.dragPosition = {
x: Number(arrT[0]),y: Number(arrT[1]),z: Number(arrT[2])
};
}
}
解决方法
这是 Material CDK 中的一个问题。团队解决了这个问题:
https://github.com/angular/components/commit/7508f46e7d1fd2eb0c20fdf8b913aacfcad5ea5a