可拖动和可调整大小 div 和 angular

Question

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

我使用了 Angular material 拖放和 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>

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

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

Answer 2

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

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

1. 使 div 可调整大小
2. Link鼠标移动到div的位置使其成为draggable/movable
3. 为您的鼠标移动添加边界限制

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

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

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

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

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

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

Create a Resizable and Draggable Angular Component

Answer 3

您可以在可拖动对象中添加一个碰撞框元素，它应该稍微小一些，并且在目标元素中完全居中。

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

Answer 4

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