在 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;

在 mat-accordion 之间拖放

drag and drop between mat-accordion

angular-material

ng2-dragula

angular