防止 MatDialog 被拖出窗口

Posted 2023-05-08

【中文标题】防止 MatDialog 被拖出窗口

【英文标题】：Prevent MatDialog from being dragged out of the window

【发布时间】：2020-04-12 12:18:12

【问题描述】：

我目前正在做一个 Angular 项目。我使用来自 Angular 材料的 MatDialog 和 drag and drop 的 Angular 模块。我想防止对话框被拖到屏幕窗口之外。有谁知道怎么做？

提前致谢。

【参考方案1】：

您可以将cdkDragBoundary 设置为具有屏幕大小的.cdk-overlay-container。

Stackblitz

【参考方案2】：

你不能用你的屏幕大小设置一个框（如覆盖）并在 drog inside 中创建拖动吗？像这个例子：https://stackblitz.com/angular/omronldbxey?file=src%2Fapp%2Fcdk-drag-drop-boundary-example.ts

【参考方案3】：

您可以使用 MatDialog 的所有屏幕尺寸，然后使其可拖动。这个link 可能会有所帮助。

【讨论】：

不幸的是，这个答案对我没有帮助，因为我知道如何使对话框可拖动，而我的问题是不能将对话框拖到窗口外。

我认为如果您在帖子或 stackblitz 链接中添加一些代码会更有帮助。