角材料可拖动对话框不起作用

Posted

技术标签:

【中文标题】角材料可拖动对话框不起作用【英文标题】:Angular material Dragable dialogbox is not working 【发布时间】:2021-02-06 21:30:22 【问题描述】:

我有一个可拖动的对话框,它不起作用。 但我在另一个项目中有类似的工作代码。

我的主要代码:

<div cdkDrag cdkDragRootElement=".cdk-overlay-pane" >
    <h2 mat-dialog-title cdkDragHandle> Justin Wu</h2>
</div>
<label>I am a  position</label>
<div>
    <button class="close" mat-button (click)="closeDialog()">Close</button> 
    <button class="save" mat-button  (click)="closeDialog()">Save</button>
</div>

您可以从这里找到演示:http://www.justa999.com/angular/#/profile

点击“关于我”按钮后,您会看到它

您可以从 profile.component.ts 调试源代码

我的版本:


"@angular-devkit/build-angular": "~0.901.0",
"@angular/cli": "~9.1.0",
"@angular/compiler-cli": "~9.1.0",
"@angular/language-service": "~9.1.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.12.62",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"

【问题讨论】:

【参考方案1】:

试试

<h2 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle> Justin Wu</h2>
<div mat-dialog-content >
<label>I am a  position</label>
</div>
<div mat-dialog-actions>
   <button class="close" mat-button (click)="closeDialog()">Close</button> 
   <button class="save" mat-button  (click)="closeDialog()">Save</button>
</div>

【讨论】:

【参考方案2】:

Angular Modal 和 CDK Drag 经常重叠,你可以使用普通的 div 并设置它的 css

position: absolute;
left: 50px;
top: 50px;

所以它显示为模态,cdkdrag 有效。

【讨论】:

cdkDrag 应该处理所有事情。请看***.com/questions/47510888/…【参考方案3】:

我自己解决了这个问题:

首先,您必须将您的内容添加到

<mat-dialog-content>
    <label>I am a  position </label>
</mat-dialog-content>

其次,你必须在 app.module.ts 中声明你的对话框组件

@NgModule(
  declarations: [
    ModalContentComponent,   

【讨论】:

以上是关于角材料可拖动对话框不起作用的主要内容,如果未能解决你的问题,请参考以下文章

角材料表:排序不起作用

角材料布局对齐=“中心中心”不起作用

角材料自动完成不起作用,没有显示错误

带有自定义指令的可拖动对话框 |角材料

可拖动不起作用

jQuery 可拖动和 appendTo 不起作用