Drag and Drop nested list
<p>I have a list of fruits and a list of baskets. I need to pick one fruit and place it in one basket. I used <a href="https://www.npmjs.com/package/ng2-dnd" rel="nofollow noreferrer">this tutorial</a> to implement the drag and drop concept. but i couldn't place the fruit at one basket. If i drag and drop a fruit into a basket, all the baskets gets that fruit. </p>

<p>I know the problem lies in this line, i should not use same name <code>fruit</code> for every basket. I need to assign it dynamically. or is there any better way of doing it. Any advice would be helpful. Thank you.</p>

<pre><code>&lt;li *ngFor="let fruit of fruitsInBasket; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i"&gt;{{fruit.name}}&lt;/li&gt;
</code></pre>

<p><strong>Here is my code:</strong> </p>

<p><strong>app.component.ts</strong></p>

<pre><code>import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  listBaskets: Array&lt;Basket&gt; = [
    {
      id: 1, name: 'Basket 1'
    }, {
      id: 2, name: 'Basket 2'
    }, {
      id: 3, name: 'Basket 3'
    }, {
      id: 4, name: 'Basket 4'
    },];
  listFruits: Array&lt;Fruit&gt; = [
    {
      id: 1, name: 'Apple'
    }, {
      id: 2, name: 'Orange'
    }, {
      id: 3, name: 'Mango'
    }, {
      id: 4, name: 'Strawberry'
    },];
  fruitsInBasket: Array&lt;Fruit&gt; = [];
  constructor() { }

}

export interface Basket {
  id: number;
  name: string;
}
export interface Fruit {
  id: number;
  name: string;
}
</code></pre>

<p><strong>app.component.html</strong></p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="col-sm-3"&gt;
    &lt;div class="panel panel-warning"&gt;
      &lt;div class="panel-heading"&gt;
        Available Baskets
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
        &lt;ul class="list-group"&gt;
          &lt;div class="panel panel-warning" *ngFor="let basket of listBaskets; let boxer=index"&gt;
            &lt;div class="panel-heading"&gt;
              {{basket.name}}
            &lt;/div&gt;
            &lt;div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="fruitsInBasket"&gt;
              &lt;ul class="list-group"&gt;
                &lt;li *ngFor="let fruit of fruitsInBasket; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i"&gt;{{fruit.name}}&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-3"&gt;
    &lt;div class="panel panel-success"&gt;
      &lt;div class="panel-heading"&gt;
        Fruits
      &lt;/div&gt;
      &lt;div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listFruits"&gt;
        &lt;ul class="list-group"&gt;
          &lt;li *ngFor="let fruit of listFruits; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i"&gt;{{fruit.name}}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Output:</strong></p>

<p><a href="https://i.stack.imgur.com/qqAW0.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qqAW0.gif" alt="enter image description here"></a></p>