目标是制作一个全宽的拖放区。我可以在其中放置“小部件”并在放置区周围自由拖动它们。但扭曲的是我也可以删除列表小部件，我也可以在其中删除其他小部件..
所以我有这个stackblitz 的代码，这个视频显示了奇怪的行为
有什么帮助吗？我可以删除 cdkdroplist 指令并假设所有内容都是 Draggable 项目，但会丢失元素上的列表功能......
和这个人一样的问题
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, z: 0 } },
{ id: 5, label: 'Item 5', dragPosition: { x: 93, y: 142, z: 0 } }
];
inprogress = [
{ id: 3, label: 'Item 3', dragPosition: { x: 0, y: 0, z: 0 } },
{ id: 6, label: 'Item 6', dragPosition: { x: 0, y: 0, z: 0 } },
{ id: 7, label: 'Item 7', dragPosition: { x: 0, y: 0, z: 0 } }
];
done = [
{ id: 4, label: 'Item 4', dragPosition: { x: 0, y: 0, z: 0 } },
{ id: 8, label: 'Item 8', dragPosition: { x: 0, y: 0, 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.previousIndex,
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])
};
}
}