尝试在手风琴中的面板之间拖放项目,以扩展拖动时悬停的面板。
如果它小于源面板的先前(打开)大小,则不允许将项目拖放到目标面板中。
观察
仅当放置项首先“退出”源容器时发生拖放,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
答案 0 :(得分:1)
尝试将最小高度和最小宽度添加到下拉列表中。这对我有用。
答案 1 :(得分:0)
请查看您的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