我在我的应用程序中使用了Angular Material CDK 拖放功能。拖放功能工作正常,除非我在对话框中使用它(对于大多数组件,我使用的是 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>
Run Code Online (Sandbox Code Playgroud)
组件.ts:
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.techs, event.previousIndex, event.currentIndex);
}
Run Code Online (Sandbox Code Playgroud)
我没有修改样式表。我认为可以通过修改 z-index 以某种方式解决此问题,但我不知道如何将其应用于“拖动”元素。