Whole Mat-dialog Becomes Drag Handle When Using Cdk Drag-drop
I was trying to combine mat-dialog and drag-drop in Angular Material 9. The dialog.html is:
Solution 1:
Your problem is here cdkDragRootElement=".cdk-overlay-pane"
You are telling it that the root element to drag is the entire overlay pane (by specifying the class).
Just remove that line and it will default to the element it is on, or specify the class for the title cdkDragRootElement=".mat-dialog-title". Either will work. The function of that directive is so you can put a smaller drag handle that drags a larger parent element.
Edit: I misunderstood what the desired functionality was, the solution is to basically seperate the cdkDrag directive and cdkDragHandle directive to different elements. Here is a modified version of your stackblitz:
Post a Comment for "Whole Mat-dialog Becomes Drag Handle When Using Cdk Drag-drop"