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
The @angular/cdk/drag-drop module provides you with a way to easily and declaratively create drag-and-drop interfaces, with support for free dragging, sorting within a list, transferring items between lists, animations, touch devices, custom drag handles, previews, and placeholders, in addition to horizontal lists and ...
Try adding min-height and min-width to the drop list. This worked for me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With