时间戳

首页 > 解决方案 > 使用 cdk 拖放时，整个 mat-dialog 变为拖动句柄

javascript - 使用 cdk 拖放时，整个 mat-dialog 变为拖动句柄

问题描述

我试图在Angular Material 9中组合mat-dialog和 。是： drag-drop
dialog.html

<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部分。

堆栈闪电战： https ://stackblitz.com/edit/angular-ivy-putdym

有人可以给个提示吗？

标签： javascriptangularangular-materialangular-cdk

解决方案

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

您告诉它要拖动的根元素是整个覆盖窗格（通过指定类）。

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

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

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

推荐阅读