Reputation: 63
Trying to drag-and-drop items between panels in an accordion, expanding the panel that is hovered while dragging.
It will not allow dropping items into the target panel, if it is smaller than the previous (opened) size of the source panel.
Observation
Dropping works only when the drop item first "exits" the source container, exited
event occurs, when the drop item hovers another container. If the target container is always visible (e.g. always expanded, or not part of the expansion panel), hovering is perceived and exited
will be emitted.
Component code
...
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' },
]},
...
];
...
View 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>
See in StackBlitz: https://stackblitz.com/edit/angular-drop-lists-in-accordion
Upvotes: 6
Views: 4593
Reputation: 1369
Please see this fork of your StackBlitz, I have added the drop event on the mat-list:
<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>
See working example here: https://stackblitz.com/edit/angular-drop-lists-in-accordion-ezkkgh?file=src/app/app.component.html
Upvotes: 1
Reputation: 3735
Try adding min-height and min-width to the drop list. This worked for me.
Upvotes: 1