为什么 DragDrop 在材质对话框中不起作用？答案

【问题标题】：Why DragDrop does not work in Material Dialog?为什么 DragDrop 在材质对话框中不起作用？
【发布时间】：2020-08-27 16:01:07
【问题描述】：

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

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

【问题讨论】：

标签： angular angular-material angular10

【解决方案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);
}

希望对你有帮助。

【讨论】：