Question

即时通讯使用此库，您可以拖放，并在此演示

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

在底部有一个在容器中进行拖放并对它们进行排序的示例：

简单排序随着删除而不删除它

这就是我想要做的事情，我不知道如何和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) {}
}

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

Answer 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

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

1 个答案: