使用cdk拖放时，整个mat-dialog变为拖动句柄 [英] Whole mat-dialog becomes drag handle when using cdk drag-drop

问题描述

我试图在Angular Material 9中结合 mat-dialog 和 drag-drop .
dialog.html 是:

I was trying to combine mat-dialog and drag-drop in Angular Material 9.
The dialog.html is:

<h1 mat-dialog-title cdkDrag cdkDragHandle cdkDragRootElement=".cdk-overlay-pane">
Title</h1>
<div>
  <p>What's your favorite animal?</p>
</div>
<div mat-dialog-actions>
  <button mat-stroked-button (click)="onExit()">Exit</button>
</div>

但是似乎整个对话框将成为拖动句柄，而不仅仅是 dialog-title 部分.

But it seems that the whole dialog becomes the drag handle instead of just the dialog-title part.

stackblitz: https://stackblitz.com/edit/angular-ivy-putdym

stackblitz:https://stackblitz.com/edit/angular-ivy-putdym

有人可以提示吗?

推荐答案

您的问题在这里 cdkDragRootElement =.cdk-overlay-pane"

您告诉它要拖动的根元素是整个覆盖窗格(通过指定类).

You are telling it that the root element to drag is the entire overlay pane (by specifying the class).

只需删除该行，它将默认为其所在的元素，或为标题 cdkDragRootElement =.mat-dialog-title" 指定类.两者都会起作用.该指令的功能是，您可以放置​​较小的拖动柄，以拖动较大的父元素.

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.

我误解了所需的功能是什么，解决方案是将cdkDrag指令和cdkDragHandle指令基本上分开到不同的元素.这是您的stackblitz的修改版本:

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:

https://stackblitz.com/edit/angular-ivy-ucdjl3

这篇关于使用cdk拖放时，整个mat-dialog变为拖动句柄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！