带有角度的可拖动和可调整大小的div

Question

我正在尝试创建可调整大小的 div 容器，而且它们是可拖动的。

我使用了 Angular 材质拖放和 Angular 可调整大小元素

这是解决方法 https://stackblitz.com/edit/angular-syurbs?embed=1&file=src/polyfills.ts

但是当我应用两者时，我可以拖动但无法调整大小。

https://stackblitz.com/edit/angular-41rqyo?file=src%2Fapp%2Fapp.component.html

如何才能两全其美？

Answer 1

创建可拖动和可调整大小的角度组件的简单方法

您可以自己实现可拖动和可调整大小的组件，而无需使用 Angular Material。您需要分三步完成。

1. 调整 div 大小
2. 将鼠标移动链接到 div 的位置，使其可拖动/移动
3. 为鼠标移动添加边界限制

步骤(1)的核心是通过减去鼠标位置（坐标）和div的位置（左侧和顶部位置）来计算新的div大小

步骤（2）需要计算鼠标的移动，并将相同数量的移动添加到 div 的顶部和左侧位置。

步骤(3)您需要计算外部容器的上、右、下、左边界位置。

要获取 div 元素的位置，您需要使用 Web API - Element.getBoundingClientRect()

要获取鼠标位置，您需要向窗口添加鼠标移动侦听器，并向 div 元素本身添加鼠标按下侦听器。

我写了一篇关于如何实现这三个步骤的文章，并提供了进一步的解释和图表。如果你还不清楚如何实现的话可以看看。

创建可调整大小且可拖动的角度组件

Answer 2

在图标或按钮上使用

cdkDragHandle

指令

<button cdkDragHandle>Drag Icon</button>

在此处查看整个 api https://material.angular.io/cdk/drag-drop/api

示例：https://stackblitz.com/angular/jamgbjgmynoq

Answer 3

您可以在可拖动的内部添加一个 hitbox 元素，它应该稍小并且完全位于目标元素内部。

蓝色区域是hitbox元素。 现在，分别在 hitbox 元素上应用

mouseenter

和

mouseleave

事件，并在鼠标不在 hitbox 元素顶部时禁用拖动。

Answer 4

对于任何想知道如何在可拖动的同时使用可调整大小的行为的人，请随意使用（或扩展）我的简单解决方案： https://stackblitz.com/edit/angular-ivy-brtlte?file=src%2Fapp%2Fapp.component.html

Answer 5

这是一个基于“Angular Material”文档的示例。

我已将这两行添加到原始示例中（请参阅cdk-drag-drop-handle-example.css）

overflow: auto;
resize: both;

这是 stackblitz 上的示例

这里是原始代码+文档 请参阅“使用手柄自定义拖动区域”部分

Answer 6

很高兴你们能够从内置功能中将 2 个移动盒子拼凑在一起。有谁知道有一个用于拖放、移动、使用手柄调整大小等目的的专业库吗？