用ng2-dragula库拖放角材料2芯片

Question

使用angular2材料和德拉古拉，我想用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>

由于棱角材料在md-chip-list中创建了一个包装器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

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>

柱塞的学分转到@yurzui

警告

• md-chip-list-wrapper类可能需要根据当前的角材料实现进行更改。
• md-chips在md-chip-list中的顺序不更新。也就是说，在重新排列md芯片后，用箭头导航它们将被混淆(见上面的柱塞)。

实际解决方案(离题)

我去了ng2-dnd图书馆。它提供了dnd-draggable和dnd-droppable指令来显式地声明哪些元素可以被拖动，哪些元素可以被删除。

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