【问题标题】：Drag and drop angular-material2 chips with ng2-dragula library使用 ng2-dragula 库拖放 angular-material2 芯片
【发布时间】：2017-02-17 23:27:54
【问题描述】：

使用angular2 material和dragula，我想拖放chips和ng2-dragula库。

指定 Dragula 容器：

<md-chip-list [dragula]="'bag-chips'">
  <md-chip>Chip 1</md-chip>
  <md-chip>Chip 2</md-chip>
</md-chip-list>

<md-chip-list [dragula]="'bag-chips'">
  <md-chip>Chip 3</md-chip>
  <md-chip>Chip 4</md-chip>
</md-chip-list>

上述方法不起作用，因为 Angular-material 在 md-chip-list 内创建了一个包装器 div.md-chip-list-wrapper。当我们尝试拖放时，整个包装器都会被拖动。

我尝试用 Dragula 的 isContainer 方法解决问题，但拖动根本不起作用。

constructor(private dragula: DragulaService) {
  dragula.setOptions('bag-chips', {
    isContainer(el) {
      return el.classList.contains('md-chip-list-wrapper');
    }
  }
}

我试图通过在md-chip-list 中添加一个 div 包装器来解决这个问题，但这似乎在角度材料中出错。

<md-chip-list>
  <div [dragula]="'bag-chips'">
    <md-chip>Chip</md-chip>
  </div>
</md-chip-list>

那么如何使 md-chip-list 与 ng2-dragula 一起工作？

【问题讨论】：

个人观点的建议；我遇到了Dragula 的问题，我发现了一个很棒的易于使用的替代方案：github.com/akserg/ng2-dnd .. 希望一旦你发现自己陷入了死胡同，这会有所帮助。
谢谢@5313m，我正在探索ng2-dnd 作为替代方案。此外，希望拖放功能将在 Angular 材料中原生实现。
抱歉，这里有什么问题？ plnkr.co/edit/eFKVzwG1GmrNV9sfwesX?p=preview
@yurzui，谢谢。看到您的示例，我从模板中删除了 [dragula]="'bag-foo'" 并将 direction: horizontal 添加到我的德雷克选项中，并且它起作用了。它仍然感觉有点 hacky 解决方案，因为它取决于 angular-material 的实现（参考md-chip-list-wrapper 类）。如果那里有任何变化，这将停止工作。无论如何，如果你回答这个问题，我会接受它。否则我会写一个。
重新排列md-chip-list 时还有另一个问题。通过拖放重新排列后，它在选择和使用箭头导航时保持原始顺序。订单没有更新，正如@yurzui 在 plunker 上看到的那样。不过，不确定这是否是这个问题的范围。

标签： angular angular-material2 ng2-dragula

【解决方案1】：

dragula 解决方案

使用 Dragula 选项 isContainer 和 direction 似乎可以解决问题：

// drake-example.component.ts
constructor(private dragula: DragulaService) {
  dragula.setOptions('bag-chips', {
    isContainer(el) {
      return el.classList.contains('md-chip-list-wrapper');
    },
    direction: 'horizontal' // or 'vertical'
  }
}

<!-- drake-example.component.html -->
<md-chip-list>
  <md-chip>Chip 1</md-chip>
  <md-chip>Chip 2</md-chip>
</md-chip-list>

<md-chip-list>
  <md-chip>Chip 3</md-chip>
  <md-chip>Chip 4</md-chip>
</md-chip-list>

a plunker 的积分转到 @yurzui

警告

md-chip-list-wrapper 类可能需要根据当前的角度材料实现进行更改。
md-chips 在md-chip-list 中的顺序不会更新。即重新排列 md 芯片后，用箭头导航它们会很混乱（参见上面的 plunker）。

实际解决方案（题外话）

我选择了ng2-dnd 图书馆。它提供了dnd-draggable 和dnd-droppable 指令来明确说明哪些元素可以拖动以及它们可以放在哪里。

总体而言，该解决方案更加复杂，但也更加可定制和直观。可拖动对象不必是可放置对象的直接父对象。

【讨论】：