扩展面板之间的Angular Material拖放项目不起作用答案

【问题标题】：Angular Material drag-and-drop items between expansion panels not working扩展面板之间的Angular Material拖放项目不起作用
【发布时间】：2019-08-13 15:19:05
【问题描述】：

尝试在折叠面板之间拖放项目，展开拖动时悬停的面板。

如果它小于源面板的先前（打开）大小，则不允许将项目放入目标面板中。

观察

仅当放置项第一次“退出”源容器时才有效，exited 事件发生，当放置项悬停在另一个容器上时。如果目标容器始终可见（例如始终展开，或不属于展开面板），则会感知悬停并发出 exited。

组件代码

...
  mouseEnterHandler(event: MouseEvent, chapterExpansionPanel: MatExpansionPanel) {
    if (event.buttons && !chapterExpansionPanel.expanded) {
      chapterExpansionPanel.open();
    }
  }

  chapters = [
    ...
    { id: 3, name: 'Chapter 3', items: [
        { id: 4, name: 'four' },
        { id: 5, name: 'five' },
    ]},
    ...
  ];
...

查看 html

<mat-accordion displayMode="flat" [multi]="false" cdkDropListGroup>
  <mat-expansion-panel
    *ngFor="let chapter of chapters" 
    #chapterExpansionPanel
    (mouseenter)="mouseEnterHandler($event, chapterExpansionPanel)"
  >
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{ chapter.name }}
      </mat-panel-title>
    </mat-expansion-panel-header>

      <mat-list
        cdkDropList 
        [cdkDropListData]="chapter.items"
      >
        <mat-list-item cdkDrag *ngFor="let item of chapter.items">
          {{ item.name }}
        </mat-list-item>
      </mat-list>

  </mat-expansion-panel>
</mat-accordion>

在 StackBlitz 中查看：https://stackblitz.com/edit/angular-drop-lists-in-accordion

【问题讨论】：

标签： angular angular-material angular-cdk

【解决方案1】：

尝试将 min-height 和 min-width 添加到下拉列表中。这对我有用。

【讨论】：

【解决方案2】：

请看你的 StackBlitz 的这个分支，我已经在 mat-list 上添加了 drop 事件：

<mat-list (cdkDropListDropped)="cdkDropListDroppedHandler($event)"
        cdkDropList 
        [cdkDropListData]="chapter.items"
      >
        <mat-list-item cdkDrag *ngFor="let item of chapter.items">
          {{ item.name }}
        </mat-list-item>
      </mat-list>

在此处查看工作示例： https://stackblitz.com/edit/angular-drop-lists-in-accordion-ezkkgh?file=src/app/app.component.html

【讨论】：