Drag and Drop from Mat Menu to Section

Question

How to drag and drop from mat-menu or submenu to section. you can check:Stackblitz

HTML Code for Mat-Menu:

<button mat-icon-button [matMenuTriggerFor]="menu">
    <mat-icon>add</mat-icon>
  </button>
  <mat-menu
    #menu="matMenu" cdkDropList
    [cdkDropListData]="bottomList"
    class="bottom-list"
    (cdkDropListDropped)="drop($event)"
    cdkDropListOrientation="horizontal"
  >
    <button mat-menu-item *ngFor="let item of bottomList" cdkDrag>
      {{ item.name }}
    </button>
  </mat-menu>

and can you explain why I do this why I compare the object with another object I know always true because of need variables like boolean or number or string?

event.previousContainer === event.container;

Answer 1

The question seems to be: "How to drag and drop from mat-menu or submenu to another element on the page".

The problem with dragging from a menu is that the backdrop overlays everything else on page when a menu is displayed, and you can't drop onto that. To drop a dragged item from a menu onto an element in the underlying page, you need to close the menu first. But when you close the menu, the element that starts the drag will disappear.

Here's what works for me :

1. make a new element as your drag image - make it displayed,but position the element out of view.

2. close the menu after you start the drag.

Closing the menu in the dragstart event doesn't work (in my chrome version) so it's done on a timeout which does work - you also might think you could catch a mouse leave event on the menu and close the menu at that point - but normal mouse events don't seem to fire when dragging.

here's blitz link