使用 ng2-dragula 库拖放 angular-material2 芯片

Question

使用 angular2 material and dragula, I want to drag and drop chips with 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 包装器来解决这个问题，但这似乎在 angular material.

中出错了

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

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

Answer 1

德拉古拉溶液

使用 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 class 可能需要根据当前 angular-material 实施进行更改。
md-chip-list 中 md-chips 的顺序没有更新。也就是说，在重新排列 md-chips 之后，用箭头导航它们会很混乱（请参阅上面的 plunker）。

实际解决（题外话）

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

总的来说，解决方案更复杂，但也更可定制和直观。 draggable 不必是 droppable 的直接父级。

使用 ng2-dragula 库拖放 angular-material2 芯片

Drag and drop angular-material2 chips with ng2-dragula library

angular

angular-material2

ng2-dragula

德拉古拉溶液

警告

实际解决（题外话）