web-dev-qa-db-fra.com

Comment changer le z-index de Angular CDK Drag and Drop?

J'utilise la Fonctionnalité de glisser-déposer CDK de matériau angulaire dans mon application. La fonctionnalité glisser-déposer fonctionne correctement, sauf si je l'utilise dans une boîte de dialogue (pour la plupart des composants que j'utilise Nebular, dans ce cas la boîte de dialogue Nebular). Le problème que je rencontre, c'est que dès que je fais glisser un élément déplaçable dans la boîte de dialogue, l'élément disparaît derrière la boîte de dialogue. Après l'avoir laissé tomber, il réapparaît dans la bonne position. Dans la capture d'écran, je suis en train de faire glisser l'élément "AAAA" hors de la liste - il disparaît derrière la boîte de dialogue.

draggable button disappears behind dialog

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

J'utilise l'implémentation suivante:

 <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);
}

Je n'ai pas modifié la feuille de style. Je suppose que ce problème peut être résolu en modifiant le z-index mais je ne sais pas comment l'appliquer à l'élément "glisser".

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

Vous pouvez modifier le DragRefConfig en injectant la bonne configuration (avec le z-index souhaité) dans votre composant. Par exemple:

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

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

Le z-index de l'élément de prévisualisation sera 10000 ;-)

Pour plus d'informations: https://material.angular.io/cdk/drag-drop/api#DragRefConfig

0
Fabrizio Rizzi