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

Question

尝试在手风琴中的面板之间拖放项目，扩展拖动时悬停的面板。

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

观察

仅当放置项首先“退出”源容器时，放置才起作用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

...
  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' },
    ]},
    ...
  ];
...

参见 StackBlitz：https ://stackblitz.com/edit/angular-drop-lists-in-accordion

Answer 1

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