Is there a way to dynamically create drop zones? I'm having some troubles with ngFor and cdkDropList.
Here is my first list and draggable elements:
<div class="subj-container"
cdkDropListOrientation="horizontal"
cdkDropList
#subjectList="cdkDropList"
[cdkDropListData]="subjects"
[cdkDropListConnectedTo]="[lessonList]"
(cdkDropListDropped)="drop($event)"
>
<div class="subject" *ngFor="let subject of subjects" cdkDrag>
{{subject.name}}
</div>
</div>
And here is my second list:
<div class="conta" cdkDropList
#lessonList="cdkDropList"
[cdkDropListData]="appointment.lessons"
[cdkDropListConnectedTo]="[subjectList]"
(cdkDropListDropped)="drop($event)">
<div class="sub" cdkDrag *ngFor="let lesson of appointment.lessons">
{{lesson.name}}
</div>
</div>
Now, div with class 'conta' is inside of a *ngFor.
My problem is, I suppose, with my second list. If I drag an element from second list to list one, it works normally, but if I try to drag element from list one to any instance of list in second list, it can't recognize that the element is being dragged. Demo here:
Am I doing something wrong here? The typescript part is working fine.
Thanks
After a full day of research, I found this pull request on Angular CDK repository on Github. Now, since I did not know how to integrate cdkDropListGroup into my example, I decited to create an array of IDs which will be added to [cdkDropListConnectedTo].
Each instance of my second list will have generated ID, and that ID will be added to array with suitable prefix (in my second list, on cdkDropList):
<div cdkDropList
[attr.id]="addId(i, j)"
[cdkDropListData]="appointment.lessons"
[cdkDropListConnectedTo]="[subjectList]"
(cdkDropListDropped)="drop($event)"
>
addId method:
addId(i, j) {
this.LIST_IDS.push('cdk-drop-list-' + i + '' + j);
return i + '' + j;
}
(cdk-drop-list- is an ID prefix. CDK places this prefix on every element with cdkDropList attribute)
So, my array will look like:
Now, I pass that array to [cdkDropListConnectedTo] in my first list:
<div class="subj-container"
cdkDropListOrientation="horizontal"
cdkDropList
#subjectList="cdkDropList"
[cdkDropListData]="subjects"
[cdkDropListConnectedTo]="LIST_IDS"
(cdkDropListDropped)="drop($event)"
>
And it works flawlessly!
Hope this will help anybody with the same problem. Also, take a look at the pull request I mentioned, my solution is only a workaround, there is probably a better solution with cdkDropListGroup
Source Link
Demo Link
For Dynamic Drag n Drop Lists, we can use ID instead of # Template variables
app.component.html
<div class="col-md-3" *ngFor="let week of weeks">
<div class="drag-container">
<div class="section-heading">Week {{week.id}}</div>
<div cdkDropList id="{{week.id}}" [cdkDropListData]="week.weeklist"
[cdkDropListConnectedTo]="connectedTo" class="item-list" (cdkDropListDropped)="drop($event)">
<div class="item-box" *ngFor="let weekItem of week.weeklist" cdkDrag>Week {{week.id}} {{weekItem}}</div>
</div>
</div>
</div>
app.component.ts
import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
weeks = [];
connectedTo = [];
constructor() {
this.weeks = [
{
id: 'week-1',
weeklist: [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
]
}, {
id: 'week-2',
weeklist: [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
]
}, {
id: 'week-3',
weeklist: [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
]
}, {
id: 'week-4',
weeklist: [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
]
},
];
for (let week of this.weeks) {
this.connectedTo.push(week.id);
};
}
drop(event: CdkDragDrop<string[]>) {
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);
}
}
}
With cdkDropListGroup you can now do:
<div cdkDropListGroup>
<div cdkDropList
[cdkDropListData]="data"
(cdkDropListDropped)="drop($event)">
<div class="row m-2">
<div *ngFor="let i of data" cdkDrag>{{i}}</div>
</div>
</div>
<div class="subj-container"
cdkDropListOrientation="horizontal"
cdkDropList
#subjectList="cdkDropList"
[cdkDropListData]="subjects"
(cdkDropListDropped)="drop($event)">
</div>
</div>
No longer a need for cdkDropListConnectedTo in this case. See https://github.com/angular/material2/blob/master/src/cdk/drag-drop/drag-drop.md
I had also to face to that problem. I tried the id approach but I didn't feel too much too confident while using. When I console.log in this addId() function, I can see the same id repeated several times. Instead of that, I tried to use the @ViewChildren decorator to have the cdkList components in real time, and it works very well for me.
In typescript
cdkDropTrackLists: CdkDropList[];
@ViewChildren(CdkDropList)
set cdkDropLists(value: QueryList<CdkDropList>) {
this.cdkDropTrackLists = value.toArray();
}
In template
<div
cdkDropList
class="track-list"
cdkDropListSortingDisabled
[cdkDropListData]="paragraphIdentifiers"
(cdkDropListDropped)="drop($event)"
[cdkDropListConnectedTo]="cdkDropTrackLists">
</div>
I think I can improve it while cdkDropLists as a QueryList has a changes properties which an Observable.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With