angular - 使用 ng2-dragula 库拖放 Angular-Material2 芯片

Question

使用angular2 material和 dragula ，我要拖放chips与 ng2-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

拖古拉解决方案

使用拖拉选项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 类可能需要根据当前的 Angular-Material 实现进行更改。
• md-chip-list 中 md-chips 的顺序不会更新。即，重新排列 md-chips 后，用箭头导航它们会很困惑(请参见上面的 plunker)。

实际解决方案(题外话)

我使用了ng2-dnd库。它提供 dnd-draggable 和 dnd-droppable 指令来明确说明可以拖动哪些元素以及可以将其放置在何处。

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