title: Angular sidenav with draggable element, goes underneath mat-sidenav-content on drag
body: <p>I'm trying to drag a picture from the mat-sidenav into the mat-sidenav-content area where it will be placed (drag with copy function). I thought that simply adding drag to a div element in sidenav would make it work, but I think there is some mix up with the z-index, that i can't figure out. The dragged element goes underneath the content area. Note that angular-draggable-droppable is used, because of snapping functionality.</p>
  
  <p>stackblitz example:
  <a href="https://stackblitz.com/edit/simulator" rel="nofollow noreferrer">https://stackblitz.com/edit/simulator</a></p>
  
  <p>sidebar.component.html:</p>
  
  <pre><code>&lt;mat-sidenav-container class="example-container"&gt;
    &lt;mat-sidenav #sidebarLeft mode="side" opened="true" class="sidebar" fixedInViewport="false"&gt;
      &lt;mat-list class="comp-groups"&gt;
        &lt;mat-list-item *ngFor="let section of complist.sections"&gt;
          &lt;h4 matLine (click)="showComp(section)"&gt;{{section.name}}&lt;/h4&gt;
        &lt;/mat-list-item&gt;
      &lt;/mat-list&gt;
          &lt;div class="component-list" *ngIf="selectedCompList"&gt;
        &lt;mat-list-item *ngFor="let subsection of selectedCompList.subSections"&gt;
          &lt;h4 mat-line&gt;{{ subsection.name }}&lt;/h4&gt;
          &lt;div mwlDraggable 
          dropData="{{subsection.name}}"
          dragActiveClass="drag-active"
          [ghostDragEnabled]="true"
          [showOriginalElementWhileDragging] ="true"
          [dragSnapGrid]="snapping"
          (dragging)="dragging($event)"&gt;
          &lt;img id="icon" src={{subsection.icon}}/&gt;
          &lt;/div&gt;
        &lt;/mat-list-item&gt;
          &lt;/div&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav #sidebarRight mode="side" opened="true" class="rightSidebar" fixedInViewport="false" position="end"&gt;
    &lt;app-sidebar-right&gt;&lt;/app-sidebar-right&gt;
    &lt;/mat-sidenav&gt;
    &lt;mat-sidenav-content class="workspace"&gt;
      &lt;app-toolbar class="toolbarRow"&gt;&lt;/app-toolbar&gt;
      &lt;app-content class="contentContainer" mwlDroppable
  
    (drop)="onDrop($event)"
    dragOverClass="drop-over-active"
    (dragOver)="dragEnter($event)"
    (dragLeave) = "dragLeave($event)"
  
    &gt;&lt;/app-content&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>