0

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;
Faceless Void
  • 31
  • 6
  • I don't undestand your question. "event.previousContainer" is equal "event.Container" when you drag and drop inside the same "container", if you move an element from one container to the another one, this value is false. You need check it the variable to change the arrays or to do nothing – Eliseo Dec 07 '20 at 13:46
  • Oh, I don't know that! – Faceless Void Dec 07 '20 at 13:50
  • But what about mat-menu, I can't drag and drop from the menu to section. – Faceless Void Dec 07 '20 at 13:51

1 Answers1

0

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

greatweatherforducks
  • 83
  • 8