ng2-dragula 对 div 中的项目进行分组答案

【问题标题】：ng2-dragula group items in divng2-dragula 对 div 中的项目进行分组
【发布时间】：2017-07-29 19:03:57
【问题描述】：

我在尝试对一些拖放功能进行原型设计时遇到了 ng2-dragula 项目。我想知道如何将以下结构分组为一个“德雷克”实体？

<div>
   <img .../>
   <img .../>
   <span>...</span>
</div>

当我在 div 中添加 [dragula] 时，div 中的每个项目都被认为是一个单独的可拖动项目。我想将它们组合为一个可拖动的项目。

谢谢！

【问题讨论】：

我所做的是在 div 中添加另一个 div，用于对元素进行分组。但是，它不会产生我想要的结果。看了ng2-dnd，语法好像更直接了。

标签： angular dragula ng2-dragula

【解决方案1】：

在您的情况下，您需要使用 dragulaModel。

示例

<div class='wrapper'>
  <div class='container' [dragula]='"another-bag"' [dragulaModel]='many'>
    <div *ngFor='let text of many' [innerHtml]='text'></div>
  </div>
  <div class='container' [dragula]='"another-bag"' [dragulaModel]='many2'>
    <div *ngFor='let text of many2' [innerHtml]='text'></div>
  </div>
</div>

class RepeatExample {
  public many: Array<User> = [{'id':123,'name':'stack'},{'id':1234,'name':'stackover'}];
  public many2: Array<User> = [];

  constructor(private dragulaService: DragulaService) {
    dragulaService.dropModel.subscribe((value) => {
      this.onDropModel(value.slice(1));
    });
    dragulaService.removeModel.subscribe((value) => {
      this.onRemoveModel(value.slice(1));
    });
  }

  private onDropModel(args) {
    let [el, target, source] = args;
    // do something else
  }

  private onRemoveModel(args) {
    let [el, source] = args;
    // do something else
  }
}

【讨论】：