CODEWITHSUNDEEP
angularangular-materialangular-cdk
Peter E
Peter E

Reputation: 63

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

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

Answers (2)

Terra
Terra

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

Paulo Pedroso
Paulo Pedroso

Reputation: 3735

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

Upvotes: 1

Related Questions