如何在容器中拖放元素并使用 ng2-dnd（github 库）进行排序答案

【问题标题】：How to drag and drop elements in containers and sort using ng2-dnd (github library)如何在容器中拖放元素并使用 ng2-dnd（github 库）进行排序
【发布时间】：2017-07-25 06:04:33
【问题描述】：

我正在使用这个库，可以让你进行拖放，并且在这个演示中

https://github.com/akserg/ng2-dnd#10-simple-sortable-with-drop-into-something-without-delete-it

在底部有一个在容器中进行拖放和排序的示例：

使用 Drop 简单排序，无需删除它

这就是我想要做的，我不知道如何做，github 页面中的示例 #10 声称可以做到这一点，但是当我在 plunker 上运行它时，我不能这样做......

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

@Component({
    selector: 'simple-sortable-copy',
    template: `
<h4>Simple sortable With Drop into something, without delete it</h4>
<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-warning"
            dnd-sortable-container [sortableData]="sourceList" [dropZones]="['source-dropZone']">
            <div class="panel-heading">Source List</div>
            <div class="panel-body">
                <ul class="list-group">
                    <li *ngFor="let source of sourceList; let x = index" class="list-group-item"
                        dnd-sortable [sortableIndex]="x" [dragEnabled]="true"
                        [dragData]="source">{{source.name}}</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel panel-info">
            <div class="panel-heading">Target List</div>
            <div class="panel-body" dnd-droppable (onDropSuccess)="addTo($event)" [dropZones]="['source-dropZone']">
                <ul class="list-group">
                    <li *ngFor="let target of targetList" class="list-group-item">
                        {{target.name}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>`
})
export class SimpleSortableCopyComponent {

    sourceList: Widget[] = [
        new Widget('1'), new Widget('2'),
        new Widget('3'), new Widget('4'),
        new Widget('5'), new Widget('6')
    ];

    targetList: Widget[] = [];
    addTo($event: any) {
        this.targetList.push($event.dragData);
    }
}

class Widget {
  constructor(public name: string) {}
}

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

【问题讨论】：

帮助即将到来，请稍候......

标签： angular

【解决方案1】：

问题在于 GitHub 自述文件已过期，并且找到了可行的解决方案：

 <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="let item of listBoxers; let 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="let item of listTeamOne; let 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="let item of listTeamTwo; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

</div>

它在 plunker 上：http://embed.plnkr.co/JbG8Si

【讨论】：