在手风琴之间拖放

时间:2017-11-12 07:34:24

标签: angular angular-material ng2-dragula

我试图在mat-accordion之间进行拖放。问题是手风琴长时间关闭我无法丢弃任何物品。

这是我的代码

public groups: Array<any> = [
  {
    name: 'Group A',
    items: [{name: 'Item A'}, {name: 'Item B'}, {name: 'Item C'}, {name: 'Item D'}]
  },
  {
    name: 'Group B',
    items: [{name: 'Item 1'}, {name: 'Item 2'}, {name: 'Item 3'}, {name: 'Item 4'}]
  }
];

HTML

<mat-accordion>
    <mat-expansion-panel *ngFor='let group of groups'>
      <mat-expansion-panel-header>
        {{group.name}}
      </mat-expansion-panel-header>
      <div *ngFor='let item of group.items' [dragula]='"first-bag"'>
        <div>{{item.name}}</div>
      </div>
    </mat-expansion-panel>
</mat-accordion>

注意:如果我将项目拖放到同一个容器中,拖放工作正常,但我希望能够在我开始拖动手风琴其他手风琴时将其拉到闭合的手风琴线上,我可以放下它。

1 个答案:

答案 0 :(得分:1)

我也面临同样的问题。 现在,我已经使用CSS解决了它。 转到dragula css文件: - node_modules / dragula / dist / dragula.css

.gu-mirror {
  position: fixed !important;
}

如果您对这个位置发表评论,那么您将看不到您所面临的奇怪行为。 虽然,我不是css专家。但要解决它,您可以调整边距,以便拖动文本和光标不会重叠。给一些余地。

margin: 0  0 0 100px !important;