如何使用 ng2-dnd（GitHub 库）拖放容器

Question

我正在使用这个库，可以让你进行拖放，在这个演示中http://akserg.github.io/ng2-webpack-demo/#/dnd

在底部有一个在容器中和容器之间进行拖放的示例（黄色）。

这就是我正在尝试做的事情，我不知道如何做，示例 #9 in the GitHub page 声称可以这样做，但是当我在 Plunker 上运行它时，我不能这样做......

import {Component} from '@angular/core';

@Component({
    selector: 'app',
    template: `
<h4>Multi list sortable</h4>
  <div class="row">
    <div class="col-sm-3">
      <div class="panel panel-warning">
        <div class="panel-heading">
          Available boxers
        </div>
        <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listBoxers">
          <ul class="list-group" >
            <li *ngFor="#item of listBoxers; #i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel panel-success">
        <div class="panel-heading">
          First Team
        </div>
        <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listTeamOne">
          <ul class="list-group" >
            <li *ngFor="#item of listTeamOne; #i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel panel-info">
        <div class="panel-heading">
          Second Team
        </div>
        <div class="panel-body" dnd-sortable-container [dropZones]="['boxers-zone']" [sortableData]="listTeamTwo">
          <ul class="list-group">
            <li *ngFor="#item of listTeamTwo; #i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>`
})
export class AppComponent {
    listBoxers:Array<string> = ['Sugar Ray Robinson','Muhammad Ali','George Foreman','Joe Frazier','Jake LaMotta','Joe Louis','Jack Dempsey','Rocky Marciano','Mike Tyson','Oscar De La Hoya'];
    listTeamOne:Array<string> = [];
    listTeamTwo:Array<string> = [];
}

如果有人可以帮助我理解或举一个小例子来说明如何在容器之间进行拖放，其中容器内部有对象也可以拖动，那将是惊人的！

谢谢！

Answer 1

似乎ng2-dnd的文档有点过时了。

#item of listBoxers; #i = index 之类的语法已被弃用。如果您正在寻找与演示中相同的示例，则可能如下：

@Component({
  selector: 'my-app',
  template: `
        <h4>Simple sortable With Drop into something, without delete it</h4>
        <div class="row">
            <div class="col-sm-3">
                Drag Containers <input type="checkbox" [(ngModel)]="dragOperation"/>
                <div dnd-sortable-container [sortableData]="containers" [dropZones]="['container-dropZone']">
                    <div class="col-sm3"  *ngFor="let container of containers; let i = index"
                            dnd-sortable [sortableIndex]="i" [dragEnabled]="dragOperation">
                        <div class="panel panel-warning"
                            dnd-sortable-container [sortableData]="container.widgets" [dropZones]="['widget-dropZone']">
                            <div class="panel-heading">
                                {{container.id}} - {{container.name}}
                            </div>
                            <div class="panel-body">
                                <ul class="list-group">
                                    <li *ngFor="let widget of container.widgets; let x = index" class="list-group-item"
                                        dnd-sortable [sortableIndex]="x" [dragEnabled]="!dragOperation"
                                        [dragData]="widget">{{widget.name}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="panel panel-info">
                    <div class="panel-heading">Widgets</div>
                    <div class="panel-body" dnd-droppable (onDropSuccess)="addTo($event)" [dropZones]="['widget-dropZone']">
                        <div *ngFor="let widget of widgets" class="panel panel-default">
                            <div class="panel-body">
                                {{widget.name}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  `
})
export class App {
  dragOperation: boolean = false;

  containers: Array<Container> = [
    new Container(1, 'Container 1', [new Widget('1'), new Widget('2')]),
    new Container(2, 'Container 2', [new Widget('3'), new Widget('4')]),
    new Container(3, 'Container 3', [new Widget('5'), new Widget('6')])
  ];

  widgets: Array<Widget> = [];
   addTo($event) {
     if ($event) {
       this.widgets.push($event.dragData);
     }
  }
}

也可以看看这个Plunker