I have a bunch of ideas and a list of projects. I need to choose one idea and match it with a project. I followed this guide to implement the drag and drop feature, but encountered an issue where every project gets assigned the same idea when dragging and dropping.
The problem seems to be related to using the same name fruit for each project. I should assign it dynamically or explore alternative solutions. Any insights would be greatly appreciated. Thank you.
<li *ngFor="let fruit of fruitsInProject; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{fruit.name}}</li>
This is my code:
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
listProjects: Array<Project> = [
{
id: 1, name: 'Project A'
}, {
id: 2, name: 'Project B'
}, {
id: 3, name: 'Project C'
}, {
id: 4, name: 'Project D'
},];
listIdeas: Array<Idea> = [
{
id: 1, name: 'Creative'
}, {
id: 2, name: 'Innovative'
}, {
id: 3, name: 'Visionary'
}, {
id: 4, name: 'Bold'
},];
fruitsInProject: Array<Idea> = [];
constructor() { }
}
export interface Project {
id: number;
name: string;
}
export interface Idea {
id: number;
name: string;
}
app.component.html
<div class="row">
<div class="col-sm-3">
<div class="panel panel-warning">
<div class="panel-heading">
Available Projects
</div>
<div class="panel-body">
<ul class="list-group">
<div class="panel panel-warning" *ngFor="let project of listProjects; let pindex=index">
<div class="panel-heading">
{{project.name}}
</div>
<div class="panel-body" dnd-sortable-container [dropZones]="['projects-zone']" [sortableData]="fruitsInProject">
<ul class="list-group">
<li *ngFor="let fruit of fruitsInProject; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{fruit.name}}</li>
</ul>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="panel panel-success">
<div class="panel-heading">
Ideas
</div>
<div class="panel-body" dnd-sortable-container [dropZones]="['projects-zone']" [sortableData]="listIdeas">
<ul class="list-group">
<li *ngFor="let idea of listIdeas; let idx = index" class="list-group-item" dnd-sortable [sortableIndex]="idx">{{idea.name}}</li>
</ul>
</div>
</div>
</div>
</div>
Output: