angularangular-materialangular10

Why DragDrop does not work in Material Dialog?


I use Drag and Drop inside Material Dialog.

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

I use this example for drag/drop

So, when I drag element I see that drop() method works:

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

But element is not moved and there is no free space where element can be dropped. I guess that problem in CSS layers or some JS interceptors, how to debug it if there is no any warning and errors. It does not work only in dialog window an works in others places (outside of dialog)

Maybe this dialog CSS makes wrongs:

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

Solution

  • This is a working example:

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

    Hope this can help you.