Как изменить z-index Angular CDK Drag and Drop? - PullRequest
Новая
       49

Как изменить z-index Angular CDK Drag and Drop?

2 голосов
/ 03 апреля 2020

Я использую Angular Материал CDK Перетаскивание функциональности в моем приложении. Функция перетаскивания работает нормально, если я не использую ее в диалоге (для большинства компонентов я использую 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-индекс, но я не знаю, как применить его к элементу «перетаскивания».

1 Ответ

1 голос
/ 11 апреля 2020

Я сам борюсь с этой проблемой и сейчас использую грубый обходной путь. Если в глобальных стилях z-index для .cdk-overlay-container установить значение 1000 (styles.s css), то вы получите желаемый результат. Это не лучшая практика.

Добавьте это в стилях. S css: 

.cdk-overlay-container {
  z-index: 1000 !important;
}

Stackblitz здесь

Насколько мне известно, это невозможно принудительно использовать z-индекс в предварительном просмотре перетаскивания (элемент «перетаскивание»), поскольку cdk динамически устанавливает свой z-индекс как встроенный стиль. Похоже, что используемая вами библиотека Nebular устанавливает z-index контейнера наложения на 1040. Библиотека Angular Material устанавливает z-index для предварительного просмотра перетаскивания равным 1000, поэтому она идет за оверлеем. Ваниль Angular Материал устанавливает для z-индекса оверлея cdk значение 1000, поэтому перетаскивание будет работать в этом сценарии.

...