Angular CDK拖拽预览显示在模态框后方的问题求助

我查阅大量Stack Overflow相关回答后仍无法解决问题，特此求助。需求是在kyn-side-drawer模态对话框中实现表格行拖拽功能，目前可完成拖拽操作，但拖拽预览始终显示在模态框后方。我参考了相关示例，未发现代码差异。使用[cdkDragPreviewContainer]="parent"属性时，预览会被移到屏幕右侧之外。

相关代码 #

TypeScript 拖拽处理逻辑

drop(event: CdkDragDrop<string[]>) {
    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
        );
      }
    }
  }

CSS 样式定义

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

HTML 模板结构

<kyn-side-drawer [open]="open" size="md" titletext="Column Settings" labeltext="" 
    (on-close)="applyOrCancelChanges($event)" submitbtntext="Ok" cancelbtntext="Cancel">
    <kyn-global-filter>
        Show:
        <kyn-checkbox value="hiddencol"> Hidden Column </kyn-checkbox>
        <kyn-checkbox value="visiblecol"> Visible Column </kyn-checkbox>
    </kyn-global-filter>
    <kyn-table>
        <kyn-thead>
            <kyn-header-tr>
                <kyn-th>Visible</kyn-th>
                <kyn-th>Column</kyn-th>
                <kyn-th>Freeze</kyn-th>
            </kyn-header-tr>
        </kyn-thead>
        <kyn-tbody cdkDropList class="example-list" [cdkDropListData]="items" (cdkDropListDropped)="drop($event)">
            <ng-container *ngFor="let row of items">
                <kyn-tr [rowId]="row.id" [key]="row.id" [selected]="row.show" [locked]="row.freeze" [preventHighlight]="row.show" 
                [dimmed]="!row.show" [checkboxSelection]="true" class="example-box" cdkDrag [cdkDragDisabled]="row.freeze">

                    <kyn-td>{{row.data | translate}}</kyn-td>
                    <kyn-td>{{row.freeze}}</kyn-td>
                </kyn-tr>
            </ng-container>
        </kyn-tbody>
    </kyn-table>
</kyn-side-drawer>

内容的提问来源于stack exchange，提问作者Amir