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

【问题标题】：Dragable and Resizable div with angular带角度的可拖动和可调整大小的 div
【发布时间】：2020-01-31 05:43:58
【问题描述】：

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

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

但是当我同时应用两者时，我可以拖动但我不能调整大小。

我怎样才能同时实现两者？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

您可以在没有 Angular Material 的情况下自己实现可拖动和调整大小的组件。您需要分三步完成。

步骤(1)的核心是通过减去鼠标位置(坐标)和div的位置(left&top position)来计算新的div大小

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

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

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

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

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

【讨论】：

你有存储库吗？有些部分我不明白
嗨@RicardoSanchezSantos，是的，请在此处找到代码：github.com/theideasaler/angular-resizable-draggable

【解决方案3】：

你可以在你的可拖动元素中添加一个 hitbox 元素，它应该稍微小一点并且在你的目标元素中完全居中。

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

【讨论】：

【解决方案4】：

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

【讨论】：