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

我使用了一些漂亮的和，我有一个3个不同的按钮，每个按钮显示一个列表，当它被点击在同一个地方，但不是在同一时间

出于某种原因，只有第一个列表可以排序，但其他两个列表不能…我可以移动对象，但它们不可拖放，因此我无法更改顺序

这是我的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>

如果有人能帮我弄明白为什么只有第一个是可排序的，那就太好了

谢谢：）

EDIT2：（根据您对问题的新版本）：

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

---

您还可以使用，这是的官方Angular2包装

通过npm安装

编辑：要将ng2 dragular与angular 2.0.0-beta.15一起使用，请添加带有github链接的ng2 dragula包，并在其切换到

包.json中的RC.1之前提交：

ng2德古拉”：git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007

> npm install

用法

将Dragula服务添加到组件中，并将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 {}

@组件({
选择器：“示例”，
指令：[德拉古拉]，
viewProviders:[DragularService]，
模板：`
可以在这两个容器之间移动这些元素
把它们移到别的地方不太可能
也有可能在同一容器中移动元素，改变它们的位置
这是默认用例。您只需要指定要使用的容器
更多的交互式用例摆在面前
一定要查看
`
})
类样本{}
我使用ng2 dragula（）或Priming（）

如果我了解你的样本，ng2 dragula应该做这项工作

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

我希望这有帮助
您可以使用
ng2 dnd


我曾在angular2测试版中使用过它，它使用起来非常简单灵活

希望这有帮助。
我不是在寻找angular 2库，而是angular 2.0.0-beta.15，他们不支持。您可以在beta.15版本中使用ng2 draguar。看看我更新的答案。iv将它添加到我的依赖项中，npm安装了它，但是当我添加Dragula和DragulaService时，它找不到从何处导入它。请将此代码放入plunkr中，以便更容易调试
> npm install

@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 {}