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

Question

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

我使用了Angular材质拖放和angular resizable element

这是解决方法 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

在图标或按钮上使用cdkDragHandle指令 <button cdkDragHandle>Drag Icon</button>

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

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

Answer 2

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

您无需Angular Material即可自己实现可拖动和可调整大小的组件。您需要分三个步骤进行操作。

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

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

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

步骤（3），您需要计算外部容器的顶部，右侧，底部和左侧边界的位置。

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

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

我写了一篇有关如何实现这三个步骤的文章，并提供了进一步的解释和图形。如果您仍不清楚如何实现，可以看看。

Create a Resizable and Draggable Angular Component

Answer 3

您可以在可拖动对象内部添加一个Hitbox元素，该元素应稍小一些，并在目标元素内部完美居中。

蓝色区域是Hitbox元素。 现在，分别在hitbox元素上应用mouseenter和mouseleave事件，并在鼠标不在Hitbox元素顶部时禁用拖动。