どのようNG2-DNDを使用してコンテナをドラッグ＆ドロップする（githubのライブラリー）

Question

イムドラッグ＆ドロップを行うことができます。このライブラリを使用して、そして下部にhttp://akserg.github.io/ng2-webpack-demo/#/dnd

このデモでドラッグをやった例があるとコンテナと容器の間のドロップ（黄色）

これは私がやろうとしていることであり、例＃9 in the github pageがそれを行うと主張していますが、私がそれを行うことはできません。

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