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

问题描述 投票:0回答:6

我正在尝试创建可调整大小的 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

如何才能两全其美?

angular angular-material resizable
6个回答
3
投票

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

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

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

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

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

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

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

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

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

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


2
投票

在图标或按钮上使用

cdkDragHandle
指令
<button cdkDragHandle>Drag Icon</button>

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

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


2
投票

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

enter image description here

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

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


0
投票

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

enter image description here


0
投票

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

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

overflow: auto;
resize: both;

这是 stackblitz 上的示例

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


0
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.