在 mat-accordion 之间拖放答案

【问题标题】：drag and drop between mat-accordion在 mat-accordion 之间拖放
【发布时间】：2017-11-21 03:22:49
【问题描述】：

我正在尝试在 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>

注意：如果我将项目拖放到同一个容器中，拖放工作正常，但我希望能够拖放到关闭的手风琴，当我开始拖动手风琴时，其他手风琴打开，我可以放在那里。

【问题讨论】：

你能在 stackblitz 中复制这个问题吗？

标签： angular angular-material ng2-dragula

【解决方案1】：

我也遇到了同样的问题。目前，我已经使用 CSS 解决了它。转到 dragula css 文件：- node_modules/dragula/dist/dragula.css

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

如果您对此职位发表评论，那么您将不会看到您所面临的奇怪行为。虽然，我不是 css 专家。但要解决它，您可以调整边距，使您的拖动文本和光标不重叠。留点余地。

margin: 0  0 0 100px !important;

【讨论】：