I'm currently working on a project where I need to drag a picture from the mat-sidenav and drop it into the mat-sidenav-content area with the copy function. My initial approach was to simply add the drag functionality to a div element in the sidenav, but I seem to be encountering an issue with the z-index that I can't quite resolve. The dragged element ends up going underneath the content area. It's worth mentioning that I am using angular-draggable-droppable for its snapping feature.
Here is an example on StackBlitz: https://stackblitz.com/edit/simulator
sidebar.component.html:
<mat-sidenav-container class="example-container">
<mat-sidenav #sidebarLeft mode="side" opened="true" class="sidebar" fixedInViewport="false">
<mat-list class="comp-groups">
<mat-list-item *ngFor="let section of complist.sections">
<h4 matLine (click)="showComp(section)">{{section.name}}</h4>
</mat-list-item>
</mat-list>
<div class="component-list" *ngIf="selectedCompList">
<mat-list-item *ngFor="let subsection of selectedCompList.subSections">
<h4 mat-line>{{subsection.name }}</h4>
<div mwlDraggable
dropData="{{subsection.name}}"
dragActiveClass="drag-active"
[ghostDragEnabled]="true"
[showOriginalElementWhileDragging] ="true"
[dragSnapGrid]="snapping"
(dragging)="dragging($event)">
<img id="icon" src={{subsection.icon}}/>
</div>
</mat-list-item>
</div>
</mat-sidenav>
<mat-sidenav #sidebarRight mode="side" opened="true" class="rightSidebar" fixedInViewport="false" position="end">
<app-sidebar-right></app-sidebar-right>
</mat-sidenav>
<mat-sidenav-content class="workspace">
<app-toolbar class="toolbarRow"></app-toolbar>
<app-content class="contentContainer" mwlDroppable
(drop)="onDrop($event)"
dragOverClass="drop-over-active"
(dragOver)="dragEnter($event)"
(dragLeave) = "dragLeave($event)"
></app-content>
</mat-sidenav-content>
</mat-sidenav-container>