Предварительный просмотр CDK с помощью перетаскивания происходит за модальным диалогом. ⇐ CSS

[Anonymous]

После многих ответов на вопросы о переполнении стека я публикую этот вопрос. У меня есть требование включить перетаскивание в модальном диалоговом окне. Я использую это в строках таблицы. Я могу перетаскивать строки, но предварительный просмотр всегда находится за модальным окном. Я также столкнулся с этим https://stackblitz.com/edit/angular-cdk ... mComponent. css,src%2Fapp%2Fapp.comComponent.css, но я не вижу никакой разницы в коде. Может ли кто-нибудь помочь мне здесь? Я также прилагаю скриншот для

того же.
[cdkDragPreviewContainer]="parent" бесполезен, поскольку он перемещает предварительный просмотр в крайнее правое положение (за пределы экрана)

< div class="snippet-code">

Код: Выделить всё

  drop(event: CdkDragDrop) {
console.log('event::::', event);
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
console.log("event.container.data[event.currentIndex]:::", event.container.data[event.currentIndex])
if (event.container.data[event.currentIndex]['freeze'] === false) {
if (event.previousContainer === event.container) {
moveItemInArray(
event.container.data,
event.previousIndex,
event.currentIndex
);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}
}

Код: Выделить всё

  .example-box {
cursor: move;
}

.example-box.cdk-drag-disabled {
cursor: default;
}

.cdk-drag-preview {
background     : white;
padding        : 20px 10px;
color          : rgba(0, 0, 0, 0.87);
display        : flex;
align-items    : center;
font-size      : 14px;
left: 0;
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
transform: translate(0);
}

.cdk-drag-placeholder {
opacity: 0;
}

.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
border: none;
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

Код: Выделить всё

Show:
 Hidden Column 
 Visible Column 




Visible
Column
Freeze






{{row.data | translate}}
{{row.freeze}}

Подробнее здесь: https://stackoverflow.com/questions/784 ... dal-dialog