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

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

1 个答案: