如何使用NG2-DND(GitHub库)拖放容器

Question

我正在使用此库，使您能够拖放，在此演示中http://akserg.github.io/ng2-webpack-demo/#/dnd

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

这是我要做的事情，我不知道Github页面中的示例＃9声称要这样做，但是当我在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