无法使用排序库ng2-dnd对几个不同的列表进行排序

Im using some nice and simple drag-and-drop library from github, and I have a view with 3 different buttons each presenting a list when its being clicked in the same place but NOT on the same time.

我使用了一些来自github的漂亮而简单的拖放库，我有一个带有3个不同按钮的视图，每个按钮在同一个地方点击时都会显示一个列表，但不是在同一时间。

From some reason only the first list can be sorted but the other 2 re not...I can move the objects but they are not droppable so I cant change the order.

从某种原因，只有第一个列表可以排序，但另外2个不是...我可以移动对象，但它们不可丢弃，所以我不能改变顺序。

this is my html:

这是我的HTML：

<div>
  <!-- list 1 button -->
  <button md-button
          (click)="showFirstList()"
          class="md-primary">List 1
  </button>

  <!-- list 2 button -->
  <button md-button
          (click)="showSecondList()"
          class="md-primary">List 2

  </button>

  <!-- list 3 button -->
  <button md-button
          (click)="ThirdList()"
          class="md-primary">List 3

  </button>
</div>


        <md-content>

          <div *ngIf="showingListOne">
            <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOneToDisplay | async">
              <div class="list-bg" *ngFor="#item of listOneToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
                ID: {{item.id}} <p></p> name: {{item.name}}
              </div>
            </div><br><br>
          </div>


          <div *ngIf="showingListTwo">
            <div dnd-sortable-container [dropZones]="['zone-two']" [sortableData]="listTwoToDisplay | async">
              <div class="list-bg" *ngFor="#item of listTwoToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
                ID: {{item.id}} <p></p> age: {{item.age}}
              </div>
            </div>
          </div>


          <div *ngIf="showingListThree">
            <div dnd-sortable-container [dropZones]="['zone-three']"  [sortableData]="listThreeToDisplay | async">
              <div class="list-bg" *ngFor="#item of listThreeToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
                ID: {{item.id}} <p></p> age: {{item.age}}
              </div>
            </div>
    </div>
          </div>

        </md-content>

this is my sorting-lists.component.ts:

这是我的sorting-lists.component.ts：

@Component({
  selector: 'sorting-lists',
  styles: [require('./sorting-lists.css')],
  directives: [DND_DIRECTIVES],
  providers: [DND_PROVIDERS],
  template: require('./sorting-lists.component.html')
})

@Injectable()
export class MyCmp implements OnInit {

  listOneToDisplay  = this._myService.getFirstListData();
  listTwoToDisplay = this._myService.getSecondListData();
  listThreeToDisplay = this._myService.getThirdListData();

  showingListOne = false;
  showingListTwo = false;
  showingListThree = false;

  constructor(private _myService: MyService) {
  };


  public showFirstList(): void {
    this.showingListOne = true;
    this.showingListTwo = false;
    this.showingListThree = false;
  }

  public showSecondList(): void {
    this.showingListTwo = true;
    this.showingListOne = false;
    this.showingListThree = false;
  }

  public showThirdList(): void {
    this.showingListThree = true;
    this.showingListTwo = false;
    this.showingListOne = false;
  }

}

if someone can help me figure out why only the first one is sortable it will be blessed!!

如果有人可以帮我弄清楚为什么只有第一个可以排序它会被祝福！

thanks :)

谢谢：）

3 个解决方案

#1

EDIT2: (According to your new version of the question):

EDIT2 :(根据您的新版本问题）：

Try to provide DND_PROVIDERS in the bootstrap of your application instead to provide it in your component. For more details take a look here.

尝试在应用程序的引导程序中提供DND_PROVIDERS，而不是在组件中提供它。有关详细信息，请查看此处。

bootstrap(AppComponent, [
    DND_PROVIDERS // It is required to have 1 unique instance of your service
]);

You can also use ng2-dragula, which is the official Angular2 wrapper for dragula.

你也可以使用ng2-dragula，这是一个官方的Angular2包裹物。

Install via npm

通过npm安装

EDIT: To use ng2-dragular with angular 2.0.0-beta.15, add the ng2-dragula package with a github link with the last commit before they switched to RC.1 in your package.json:

编辑：要使用角度为2.0.0-beta.15的ng2-dragular，在你的package.json中切换到RC.1之前，添加带有github链接的ng2-dragula包和最后一次提交：

ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007

ng2-dragula“：”git：//github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007

> npm install

Usage

用法

Add the DragulaService to your components and add Dragula to your components directives.

将DragulaService添加到组件中，并将Dragula添加到组件指令中。

@Component({
  selector: 'sample',
  directives: [Dragula],
  viewProviders: [DragulaService],
  template:`
  <div>
    <div class='wrapper'>
      <div class='container' [dragula]='"first-bag"'>
        <div>You can move these elements between these two containers</div>
        <div>Moving them anywhere else isn't quite possible</div>
        <div>There's also the possibility of moving elements around in the same container, changing their position</div>
      </div>
      <div class='container' [dragula]='"first-bag"'>
        <div>This is the default use case. You only need to specify the containers you want to use</div>
        <div>More interactive use cases lie ahead</div>
        <div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
      </div>
    </div>
  </div>
  `
})
class Sample {}

#2

I use either ng2-dragula (https://github.com/valor-software/ng2-dragula) or primeng (http://www.primefaces.org/primeng).

我使用ng2-dragula（https://github.com/valor-software/ng2-dragula）或primeng（http://www.primefaces.org/primeng）。

If I understand your sample, ng2-dragula should do the job.

如果我理解你的样本，那么ng2-dragula应该可以胜任。

Not sure if these work with the Angular2 version you need to use.

不确定这些是否适用于您需要使用的Angular2版本。

I hope this helps

我希望这有帮助

#3

You can use ng2-dnd.

你可以使用ng2-dnd。

ng2-dnd

NG2-DND

I had used it in angular2 beta and its quite easy and flexible to use.

我曾经在angular2 beta中使用它，它非常容易使用。

Hope this helps.

希望这可以帮助。

#1