Question

我有一份水果清单和一篮子清单。我需要摘一个水果并将其放在一个篮子里。我使用this tutorial来实现拖放概念。但我无法将水果放在一个篮子里。如果我将水果拖放到篮子里，所有篮子都会得到那个水果。

我知道问题在于这一行，我不应该为每个篮子使用相同的名称fruit。我需要动态分配它。还是有更好的方法。任何意见将是有益的。谢谢。

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

这是我的代码：

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>

输出：

Answer 1

您在所有篮子中看到相同水果的原因是因为您只使用一个var UpdateAdminAccess = function (UpdateRole,callback) { $http({ method:'POST', url: urlEdit + 'auth/accessPermission', data: UpdateRole }).success(function (data, response, headers, config) { callback(response); console.log("successfully updated"); }).error(function(data,status,error, headers,config){ callback(error); console.log(status); console.log(data); }) }; adminAccess.accessAdminPhone= UpdateAdminAccess; return adminAccess; });阵列来存储所有篮子的水果。

实现此目的的最佳方法是为每个篮子使用单独的阵列，并将掉落的果实推到droppable的fruitsInBasket上。查看文档here。

拖放嵌套列表

1 个答案: