angular - 在 mat-accordion 之间拖放

Question

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

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

Answer 1

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

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

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

margin: 0  0 0 100px !important;