时间戳

首页 > 解决方案 > 带有可拖动元素的 Angular sidenav，在拖动时位于 mat-sidenav-content 下方

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

问题描述

我正在尝试将图片从 mat-sidenav 拖到将放置它的 mat-sidenav-content 区域（使用复制功能拖动）。我认为只需在 sidenav 中向 div 元素添加拖动即可使其工作，但我认为与 z-index 有一些混淆，我无法弄清楚。拖动的元素位于内容区域下方。请注意，由于捕捉功能，使用了 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>

标签： angulartypescriptdrag-and-drop

解决方案

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

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

推荐阅读