css - 如何更改 Angular CDK 拖放的 z-index？

Question

我正在使用 Angular Material CDK Drag and Drop Functionality在我的应用程序中。拖放功能运行良好，除非我在对话框中使用它(对于大多数组件，我使用的是 Nebular，在本例中为 Nebular 对话框)。我遇到的问题是，只要我在对话框中拖动一个可拖动元素，该元素就会消失在对话框后面。放下后，它会重新出现在正确的位置。在屏幕截图中，我将“AAAA”元素从列表中拖出 - 它消失在对话框后面。



Stackblitz:https://stackblitz.com/edit/angular-znqckb

我正在使用以下实现:

 <div cdkDropList cdkDropListOrientation="horizontal" class="example-list" [cdkDropListData]="techs"
     (cdkDropListDropped)="drop($event)">
     <button *ngFor="let tech of techs" nbButton cdkDrag>{{tech}}</button>
 </div>

组件.ts:

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.techs, event.previousIndex, event.currentIndex);
}

我没有修改样式表。我认为可以通过修改 z-index 以某种方式解决此问题，但我不知道如何将其应用于“拖动”元素。

Answer 1

您可以更改 DragRefConfig 在组件中注入(inject)正确的配置(具有所需的 z-index)。例如:

const DragConfig = {
  dragStartThreshold: 0,
  pointerDirectionChangeThreshold: 5,
  zIndex: 10000
};

providers: [{ provide: CDK_DRAG_CONFIG, useValue: DragConfig }]

预览元素的 z-index 将为 10000 ;-)
更多信息: https://material.angular.io/cdk/drag-drop/api#DragRefConfig