CDK 拖放预览位于模式对话框后面

Question

在查看了许多堆栈溢出答案后，我发布了这个问题。我需要在对话框模式上启用拖放功能。我在表行上使用它。我可以拖放行，但预览始终位于模式后面。我也遇到过这个https://stackblitz.com/edit/angular-cdk-droplist-mat-dialog-solve?file=src%2Fstyles.css,angular.json,src%2Fapp%2Fparent%2Fparent.component .css,src%2Fapp%2Fapp.component.css 但我没有看到代码有任何区别。有人能帮我一下吗？我还附上了相同的屏幕截图。

[cdkDragPreviewContainer]="parent" 没有帮助，因为它将预览移动到最右侧（屏幕外）

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

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

<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>

Answer 1

叠加层比拖动项有更多

z-index

，我们只需设置更高的 z-index 即可解决问题！

z-index

-> 告诉浏览器哪个元素优先放置在另一个元素之上，可以将元素视为堆叠在另一个元素之上的纸张，从上到下遍历元素，

z-index

可用于覆盖此堆叠！

.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);
    z-index: 2000 !important; /* Kindly tune this value so that it works best, start with a really high value and then reduce! */
  }