3

使用angular2 材料和dragula ，我想用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-materialdiv.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');
    }
  }
}

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

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

那么如何md-chip-list使用 ng2-dragula 进行工作呢？

4

1 回答 1

4

德拉古拉溶液

使用 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>

一个plunker的学分去@yurzui

警告

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

实际解决方案（题外话）

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

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

于 2017-02-20T12:10:03.177 回答