使用ng2-dragula重新订购袋子

Question

我使用ng2-dragula实现了一些丰富的排序UI。我让它工作到可以对任何<li>元素进行重新排序的程度。

<div *ngFor="let bag of chest" class='container'>
  <ul [dragula]='"bag-one"' [dragulaModel]='bag'>
    <li *ngFor="let item of bag">{{item}}</li>
  </ul>
</div>

我的数组变量是chest：[[1, 3, 5], [2, 4, 6]]数组。因此，我可以在两个container <li>之间自由地移动任何div。我想要做的是对整个div本身进行重新排序。

我尝试了以下方法，但没有成功：<div *ngFor="let bag of chest" class='container2' [dragula]='"bag-one"' [dragulaModel]='chest'>

Answer 1

您应该为每个容器创建动态角袋名称。

<div *ngFor="let bag of chest; let i of index" class='container'>
  <ul [dragula]='"bag"+i' [dragulaModel]='bag'>
    <li *ngFor="let item of bag">{{item}}</li>
  </ul>
</div>

代码'"bag"+i'将为每次迭代生成新的包。