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

问题描述

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

标题
<div><p>你最喜欢的动物是什么?</p>

<div mat-dialog-actions><button mat-stroked-button (click)="onExit()">退出</button>

但似乎整个对话框变成了拖动手柄，而不仅仅是 dialog-title 部分.

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

有人可以给点提示吗?

解决方案

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

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

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

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

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

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>

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

Could someone please give a hint?

解决方案

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:

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

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