为什么 DragDrop 在 Material 对话框中不起作用？

Question

我在 Material 对话框中使用拖放。

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

但是元素没有移动，也没有空闲的地方 space 可以放置元素。我猜这个问题在CSS层或者一些JS拦截器，如果没有任何警告和错误，如何调试它。它不仅在对话框 window 中有效，在其他地方（在对话框之外）也有效

也许这个对话框CSS有错误：

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

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

希望对您有所帮助。

为什么 DragDrop 在 Material 对话框中不起作用？

Why DragDrop does not work in Material Dialog?

angular-material

angular

angular10