Angular 为什么DragDrop在“材质”对话框中不工作？

我在“材质”对话框中使用拖放

 <div mat-dialog-content>
    <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let movie of movies" cdkDrag>
        {{movie.title}}
        <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
      </div>
    </div>
 </div mat-dialog-content>

但元素并没有移动，并且并没有可以放置元素的可用空间。 我猜CSS层或一些JS拦截器中的问题是，如果没有任何警告和错误，如何调试它。它不仅在对话框窗口中工作，而且在其他位置（对话框外部）工作

可能这个CSS对话框有错误：

.cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: 10000;
}

---

这是一个工作示例：

.drag-drop {
    cursor: move;
}

.cdk-drag-preview {
    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);
}

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

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

希望这能帮助你

.drag-drop {
    cursor: move;
}

.cdk-drag-preview {
    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);
}

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

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