角7拖拽动态创建落区
是否有一种动态创建放置区域的方法？我和ngFor和cdkDropList有一些问题。
下面是我的第一个列表和可拖放的元素：
<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>这是我的第二份清单：
<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>现在，类“conta”的div位于*ngFor中。
我的问题是，我想，我的第二个清单。如果我将一个元素从第二个列表拖到一个列表列表中，它正常工作，但是如果我试图将元素从list one拖到第二个列表中的任何list实例，它就无法识别该元素正在被拖动。这里的演示：
我在这里做错什么了吗？打字稿部分工作正常。
谢谢
回答 6
Stack Overflow用户
发布于 2018-11-11 16:07:02
经过整整一天的研究，我在Github上的角CDK存储库中找到了这拉请求。现在，由于我不知道如何将cdkDropListGroup集成到我的示例中，所以我选择创建一个I数组，该数组将被添加到cdkDropListConnectedTo.中。
第二个列表的每个实例都将生成ID，该ID将添加到具有适当前缀的数组中(在我的第二个列表中，在cdkDropList上)：
<div cdkDropList
[attr.id]="addId(i, j)"
[cdkDropListData]="appointment.lessons"
[cdkDropListConnectedTo]="[subjectList]"
(cdkDropListDropped)="drop($event)"
>addId方法：
addId(i, j) {
this.LIST_IDS.push('cdk-drop-list-' + i + '' + j);
return i + '' + j;
}(cdk-下拉列表--是ID前缀。在每个具有cdkDropList属性的元素上放置此前缀)
因此，我的数组看起来如下：
- cdk-下拉列表-00
- cdk-下拉列表-01
- cdk-下拉列表-02
- 等。
现在，我将第一个列表中的数组传递给cdkDropListConnectedTo：
<div class="subj-container"
cdkDropListOrientation="horizontal"
cdkDropList
#subjectList="cdkDropList"
[cdkDropListData]="subjects"
[cdkDropListConnectedTo]="LIST_IDS"
(cdkDropListDropped)="drop($event)"
>而且它完美无缺！
希望这能对任何有同样问题的人有所帮助。另外，看看我提到的拉请求，我的解决方案只是一个解决方案，可能有一个更好的cdkDropListGroup解决方案。
Stack Overflow用户
发布于 2019-04-12 10:15:18
Source 链接
Demo 链接
对于动态拖放列表，我们可以使用ID代替#模板变量
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);
}
}
}Stack Overflow用户
发布于 2018-11-25 16:40:51
使用cdkDropListGroup，您现在可以这样做：
<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>
在这种情况下，不再需要cdkDropListConnectedTo。请参阅https://github.com/angular/material2/blob/master/src/cdk/drag-drop/drag-drop.md
https://stackoverflow.com/questions/53239092
复制相似问题
腾讯云开发者
