Question

我正在尝试将图片从mat-sidenav拖动到要放置的mat-sidenav-content区域中（使用复制功能拖动）。我以为只是在sidenav中向div元素添加拖动将使其起作用，但是我认为z索引有些混淆，我无法弄清楚。拖动的元素位于内容区域下方。请注意，由于具有捕捉功能，因此使用angular-draggable-droppable。

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>

Answer 1

我能够通过修改可拖动内容的CSS来解决此问题。

.the-draggable-content { position: fixed; }

带有可拖动元素的角sidenav，在拖动时位于mat-sidenav-content下方

1 个答案: