为什么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>

我将此示例用于drag/drop

因此，当我拖动元素时，我看到drop()方法有效：

  drop(event: CdkDragDrop<string[]>) {
        // if (event.prevIoUsContainer === event.container) {
        console.log('It works');
        moveItemInArray(this.items,event.prevIoUsIndex,event.currentIndex);
        //}
    }

但是元素不会移动，并且没有可放置元素的可用空间。 我猜这是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.2),0 8px 10px 1px rgba(0,0.14),0 3px 14px 2px rgba(0,0.12);
}

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

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

希望这可以为您提供帮助。