Drag and Drop nested list

问题

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 this tutorial 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.

I know the problem lies in this line, i should not use same name fruit 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.

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

Here 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 {
  listBaskets: Array<Basket> = [
    {
      id: 1, name: 'Basket 1'
    }, {
      id: 2, name: 'Basket 2'
    }, {
      id: 3, name: 'Basket 3'
    }, {
      id: 4, name: 'Basket 4'
    },];
  listFruits: Array<Fruit> = [
    {
      id: 1, name: 'Apple'
    }, {
      id: 2, name: 'Orange'
    }, {
      id: 3, name: 'Mango'
    }, {
      id: 4, name: 'Strawberry'
    },];
  fruitsInBasket: Array<Fruit> = [];
  constructor() { }

}

export interface Basket {
  id: number;
  name: string;
}
export interface Fruit {
  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 Baskets
      </div>
      <div class="panel-body">
        <ul class="list-group">
          <div class="panel panel-warning" *ngFor="let basket of listBaskets; let boxer=index">
            <div class="panel-heading">
              {{basket.name}}
            </div>
            <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="fruitsInBasket">
              <ul class="list-group">
                <li *ngFor="let fruit of fruitsInBasket; 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">
        Fruits
      </div>
      <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listFruits">
        <ul class="list-group">
          <li *ngFor="let fruit of listFruits; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{fruit.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Output:

回答1:

This line is your problem

// app.component.ts
...
fruitsInBasket: Array<Fruit> = [];

You are storing the same data for all the boxes, so when you drop a fruit in one of them, you drop it in all of them.

Consider changing the type of fruitsInBasket to

// app.component.ts
... 
fruitsInBasket: { [basket: number]: Array<Fruit> };

and rewriting the component, keeping in mind that you're maintaining a separate datastore for each basket.

回答2:

The reason why you are seeing the same fruit in all the baskets is because you are using just one fruitsInBasket Array to store fruits for all of them.

The best way to accomplish this is to use separate Arrays for each of the baskets and push the dropped fruit on onDropSuccess of the droppable. Check out the docs here.

来源：https://stackoverflow.com/questions/40968459/drag-and-drop-nested-list

标签

angular

typescript

drag-and-drop