web-dev-qa-db-ja.com

Angular CDKドラッグアンドドロップのz-indexを変更する方法は？

アプリケーションで Angular Material CDK Drag and Drop Functionality を使用しています。ドラッグアンドドロップ機能は、ダイアログ内で使用しない限り正常に機能します（ほとんどのコンポーネントでは、Nebular、この場合はNebularダイアログを使用しています）。私が遭遇している問題は、ダイアログ内でドラッグ可能な要素をドラッグするとすぐに、要素がダイアログの後ろに消えることです。落とすと正しい位置に再現されます。スクリーンショットでは、「AAAA」要素をリストからドラッグして離しています。ダイアログの後ろに表示されなくなります。

draggable button disappears behind dialog

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を変更することでなんとか解決できると思いますが、「ドラッグ」要素に適用する方法がわかりません。

cssangularangular-materialdrag-and-dropangular-cdk
4
Tobias Kaufmann

コンポーネントに適切な構成（必要な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

0
Fabrizio Rizzi