使用角度材料 cdk 的拖放功能,我想为每个 json 元素实现 drop ara
html
<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>
ts
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”删除到特定键。如果有任何东西从“待办事项”拖放到放置区域,它应该将类别添加到该特定键。这意味着我需要每个标签“名称”应该有一个放置区域部分到该特定名称
例如,如果我将应用程序开发拖放到“ios”旁边,该应用程序开发将添加到名称为“ios”的 json
并且放置区域和标签应该并排,如下所示
删除完成后的输出json应该是:
completed = [
{
name: 'Android',
category: 'App Development'
},
{
name: 'MongoDB',
category: 'web development'
},
{
name: 'React',
category: 'software development'
}
]