The goal is to make a full-width dropzone. In which I can drop "widgets" and drag them freely around the dropzone. But the twist is that I can also drop list widgets, in which I can drop other widgets as well..
So I have this stackblitz With the code, and this video showing the strange behavior
Any help? I could remove the cdkdroplist directive and assume everything as a Draggable item but will lost the list features on the elements...
Same problem as this 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, 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])
};
}
}
