アプリケーションで 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>
Component.ts:
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.techs, event.previousIndex, event.currentIndex);
}
スタイルシートは変更しませんでした。この問題はz-indexを変更することでなんとか解決できると思いますが、「ドラッグ」要素に適用する方法がわかりません。
コンポーネントに適切な構成(必要なz-indexを含む)を挿入するDragRefConfigを変更できます。例えば:
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