拖拉解决方案

Question

使用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在div.md-chip-list-wrapper内创建了一个包装md-chip-list。当我们尝试拖放时，整个包装器都会被拖动。

我尝试使用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一起工作？

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类。
md-chips中md-chip-list的顺序不会更新。即重新排列md-chips后，用箭头导航它们会很困惑（见上面的插件）。

实际解决方案（题外话）

我选择ng2-dnd库。它提供了dnd-draggable和dnd-droppable指令来明确说明可以拖动哪些元素以及可以删除哪些元素。

总的来说，解决方案更复杂，但也更具可定制性和直观性。可拖动的不必是droppable的直接父母。

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

1 个答案:

拖拉解决方案

警告

实际解决方案（题外话）