Angular 拖放;特定json元素的放置区域*ngFor
使用角度材质cdk的拖放功能,我希望为每个json元素实现拖放ara htmlAngular 拖放;特定json元素的放置区域*ngFor,angular,angular-material,drag-and-drop,angular8,angular-cdk-drag-drop,Angular,Angular Material,Drag And Drop,Angular8,Angular Cdk Drag Drop,使用角度材质cdk的拖放功能,我希望为每个json元素实现拖放ara html 有人能帮我吗?我怎样才能做到这一点 <div class="todo-container column-container"> <div class="list" cdkDropList #todoList="cdkDropList" [cdkDropL
有人能帮我吗?我怎样才能做到这一点
<div class="todo-container column-container">
<div class="list"
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="todos"
[cdkDropListConnectedTo]="[doneList]"
(cdkDropListDropped)="onDrop($event)">
<h2>Tech to learn</h2>
<mat-card *ngFor="let todo of todos" cdkDrag>
<mat-card-header>
<mat-card-subtitle>{{todo.category}}</mat-card-subtitle>
</mat-card-header>
</mat-card>
</div>
</div>
<div class="done-container column-container">
<div class="list"
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="completed"
[cdkDropListConnectedTo]="todoList"
(cdkDropListDropped)="onDrop($event)">
<h2>Tech learned</h2>
<mat-card *ngFor="let complete of completed" cdkDrag>
<mat-card-header>
<mat-card-title>{{complete.name}}</mat-card-title>
</mat-card-header>
</mat-card>
</div>
</div>
</div>
todos = [
{
name: 'Angular',
category: 'Web Development'
},
{
name: 'Flexbox',
category: 'Web Development'
},
{
name: 'iOS',
category: 'App Development'
},
{
name: 'Java',
category: 'Software development'
}
];
completed = [
{
name: 'Android',
category: ''
},
{
name: 'MongoDB',
category: ''
},
{
name: 'React',
category: ''
}
];
onDrop(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);
}
}
completed = [
{
name: 'Android',
category: 'App Development'
},
{
name: 'MongoDB',
category: 'web development'
},
{
name: 'React',
category: 'software development'
}
]