Angular Material drag-and-drop items between expansion panels not working

6
votes

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

2
angularangular-materialangular-cdk

2 Answers

1
votes

Try adding min-height and min-width to the drop list. This worked for me.

0
votes

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