【sgDragSize】自定义拖拽修改DIV尺寸组件，适用于窗体大小调整

核心原理就是在四条边、四个顶点加上透明的div，给不同方向提供按下移动鼠标监听 ，对应计算宽度高度、坐标变化 

特性：

  1. 支持设置拖拽的最小宽度、最小高度、最大宽度、最大高度
  2. 可以双击某一条边，最大化对应方向的尺寸；再一次双击，则会恢复到原始大小

sgDragSize源码

<template><div :class="$options.name" :disabled="disabled" draggable="false"><div :class="`resize-handle resize-${a}`" draggable="false" @mousedown.stop="clickResizeHandle(a)"@dblclick.stop="dblclickResizeHandle(a)" v-for="(a, i) in sizeIndexs" :key="i"></div></div>
</template>
<script>
export default {name: 'sgDragSize',data() {return {dragSizeIndex: '',originRect: {},dblclickOriginRect: {},sizeIndexs: ['top','right','bottom','left','top-left','top-right','bottom-left','bottom-right',],}},props: ["disabled",//屏蔽"minWidth",//拖拽的最小宽度"minHeight",//拖拽的最小高度"maxWidth",//拖拽的最大宽度"maxHeight",//拖拽的最大高度],watch: {disabled: {handler(newValue, oldValue) {newValue && this.__removeWindowEvents();}, deep: true, immediate: true,},},destroyed() {this.__removeWindowEvents();},methods: {clickResizeHandle(d) {this.dragSizeIndex = d;this.mousedown(d);},dblclickResizeHandle(d) {let rect = this.$el.getBoundingClientRect();rect.width < innerWidth && rect.height < innerHeight && (this.dblclickOriginRect = rect);this.dblResize(d, rect);},__addWindowEvents() {this.__removeWindowEvents();addEventListener('mousemove', this.mousemove_window);addEventListener('mouseup', this.mouseup_window);},__removeWindowEvents() {removeEventListener('mousemove', this.mousemove_window);removeEventListener('mouseup', this.mouseup_window);},mousedown(e) {this.originRect = this.$el.getBoundingClientRect();this.originRect.bottomRightX = this.originRect.x + this.originRect.width;//右下角坐标.xthis.originRect.bottomRightY = this.originRect.y + this.originRect.height;//右下角坐标.ythis.$emit('dragStart', e);this.__addWindowEvents();},mousemove_window({ x, y }) {let minWidth = this.minWidth || 50, minHeight = this.minHeight || 50, maxWidth = this.maxWidth || innerWidth, maxHeight = this.maxHeight || innerHeight;x < 0 && (x = 0), y < 0 && (y = 0), x > innerWidth && (x = innerWidth), y > innerHeight && (y = innerHeight);let style = {};switch (this.dragSizeIndex) {case 'top-left':style.left = x;style.top = y;style.width = this.originRect.bottomRightX - x;style.width <= minWidth && (style.width = minWidth, style.left = this.originRect.bottomRightX - minWidth);style.height = this.originRect.bottomRightY - y;style.height <= minHeight && (style.height = minHeight, style.top = this.originRect.bottomRightY - minHeight);break;case 'top':style.left = this.originRect.x;style.top = y;style.width = this.originRect.width;style.height = this.originRect.bottomRightY - y;style.height <= minHeight && (style.height = minHeight, style.top = this.originRect.bottomRightY - minHeight);break;case 'top-right':style.left = this.originRect.x;style.top = y;style.width = x - this.originRect.x;style.width <= minWidth && (style.width = minWidth, style.left = this.originRect.x);style.height = this.originRect.bottomRightY - y;style.height <= minHeight && (style.height = minHeight, style.top = this.originRect.bottomRightY - minHeight);break;case 'left':style.left = x;style.top = this.originRect.y;style.width = this.originRect.bottomRightX - x;style.width <= minWidth && (style.width = minWidth, style.left = this.originRect.bottomRightX - minWidth);style.height = this.originRect.height;break;case 'right':style.left = this.originRect.x;style.top = this.originRect.y;style.width = x - this.originRect.x;style.width <= minWidth && (style.width = minWidth, style.left = this.originRect.x);style.height = this.originRect.height;break;case 'bottom-left':style.left = x;style.top = this.originRect.y;style.width = this.originRect.bottomRightX - x;style.width <= minWidth && (style.width = minWidth, style.left = this.originRect.bottomRightX - minWidth);style.height = y - this.originRect.y;style.height <= minHeight && (style.height = minHeight, style.top = this.originRect.y);break;case 'bottom':style.left = this.originRect.x;style.top = this.originRect.y;style.width = this.originRect.width;style.height = y - this.originRect.y;style.height <= minHeight && (style.height = minHeight, style.top = this.originRect.y);break;case 'bottom-right':style.left = this.originRect.x;style.top = this.originRect.y;style.width = x - this.originRect.x;style.width <= minWidth && (style.width = minWidth, style.left = this.originRect.x);style.height = y - this.originRect.y;style.height <= minHeight && (style.height = minHeight, style.top = this.originRect.y);break;default:}style.width > maxWidth && (style.width = maxWidth);style.height > maxHeight && (style.height = maxHeight);Object.keys(style).forEach(k => style[k] = `${style[k]}px`);style['transition-property'] = 'width,height';style['transition-duration'] = '0,0';this.$emit('dragging', style);},dblResize(d, rect) {let style = {};switch (d) {case 'top-left':break;case 'top':case 'bottom':style.left = this.originRect.x;style.top = rect.height >= innerHeight ? this.dblclickOriginRect.y : 0;style.width = this.originRect.width;style.height = rect.height >= innerHeight ? this.dblclickOriginRect.height : innerHeight;break;case 'top-right':break;case 'left':case 'right':style.left = rect.width >= innerWidth ? this.dblclickOriginRect.x : 0;style.top = this.originRect.y;style.width = rect.width >= innerWidth ? this.dblclickOriginRect.width : innerWidth;style.height = this.originRect.height;break;case 'bottom-left':break;case 'bottom-right':break;default:}Object.keys(style).forEach(k => style[k] = `${style[k]}px`);style['transition-property'] = 'width,height';style['transition-duration'] = '0.1s,0.1s';this.$emit('dragging', style);},mouseup_window(e) {this.$emit('dragEnd', e);this.__removeWindowEvents();},}
};
</script> 
<style lang="scss">
.sgDragSize {position: absolute;width: 100%;height: 100%;left: 0;top: 0;pointer-events: none;.resize-handle {position: absolute;z-index: 100;display: block;pointer-events: auto;}&[disabled] {.resize-handle {pointer-events: none;}}.resize-top {cursor: n-resize;top: -3px;left: 0px;height: 7px;width: 100%;}.resize-right {cursor: e-resize;right: -3px;top: 0px;width: 7px;height: 100%;}.resize-bottom {cursor: s-resize;bottom: -3px;left: 0px;height: 7px;width: 100%;}.resize-left {cursor: w-resize;left: -3px;top: 0px;width: 7px;height: 100%;}.resize-top-right {cursor: ne-resize;width: 16px;height: 16px;right: -8px;top: -8px;}.resize-bottom-right {cursor: se-resize;width: 20px;height: 20px;right: -8px;bottom: -8px;background: url('/static/img/desktop/sgDragSize/resize_corner.png') no-repeat;}.resize-bottom-left {cursor: sw-resize;width: 16px;height: 16px;left: -8px;bottom: -8px;}.resize-top-left {cursor: nw-resize;width: 16px;height: 16px;left: -8px;top: -8px;}
}
</style>

应用

<template><div><div class="box" :style="style"><label>最小尺寸：宽度400px，高度200px</label><sgDragSize @dragging="d => style = d" :minWidth="400" :minHeight="200" /></div></div>
</template>
<script>
import sgDragSize from "@/vue/components/admin/sgDragSize";
export default {components: {sgDragSize,},data() {return {style: {height: '500px',width: '800px',left: '100px',top: '100px',},}},
};
</script>
<style lang="scss" scoped>
.box {position: absolute;display: flex;justify-content: center;align-items: center;background-color: #409EFF55;box-sizing: border-box;border: 1px solid #409EFF;label {user-select: none;color: #409EFF;}
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/72279.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Maven依赖管理

Maven依赖管理

依赖配置 依赖指的是项目在运行时所需要的jar包&#xff0c;一个项目中可以引入多个依赖 配置方法 1.在项目pom.xml中编写 <dependencies> 标签 2.在 <dependencies> 标签中使用<dependency>引入坐标 3.定义坐标的groupId,artifactId,version 4. 刷新按钮&a…
阅读更多...
uniapp 获取 view 的宽度、高度以及上下左右左边界位置

uniapp 获取 view 的宽度、高度以及上下左右左边界位置

<view class"cont-box"></view> /* 获取节点信息的对象 */ getElementRect() {const query uni.createSelectorQuery().in(this);query.select(".cont-box").boundingClientRect(res > {console.log(res);console.log(res.height); // 10…
阅读更多...
配资平台app（正规股票配资软件）架构是怎么搭建的？

配资平台app（正规股票配资软件）架构是怎么搭建的？

随着股票市场的发展&#xff0c;越来越多的投资者开始尝试使用股票配资平台进行杠杆炒股&#xff0c;因此&#xff0c;搭建一套稳定、可靠的配资平台app架构显得尤为重要。本文将介绍配资平台app架构设计的关键要素&#xff0c;以及建立一个正规的配资平台app所需考虑的问题。 …
阅读更多...
LeetCode150道面试经典题-- 环形链表(简单)

LeetCode150道面试经典题-- 环形链表(简单)

1.题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置&…
阅读更多...
三本书与三场发布会，和鲸社区重新定义编程类书籍从阅读到实践新体验

三本书与三场发布会，和鲸社区重新定义编程类书籍从阅读到实践新体验

当 AI 开发者社区配备 AI 基础设施开发平台工具时&#xff0c;它还能做什么&#xff1f; 答案是&#xff1a;过去半年&#xff0c;和鲸社区凭借在气象、医学、社科等垂直领域的长期积累以及多方伙伴的支持&#xff0c;联合举办了三场新书发布会——从 Python 到 R 语言 、从气…
阅读更多...
容器和云原生（三）：kubernetes搭建与使用

容器和云原生（三）：kubernetes搭建与使用

目录 单机K8S docker containerd image依赖 kubeadm初始化 验证 crictl工具 K8S核心组件 上文安装单机docker是很简单docker&#xff0c;但是生产环境需要多个主机&#xff0c;主机上启动多个docker容器&#xff0c;相同容器会绑定形成1个服务service&#xff0c;微服务…
阅读更多...
FirmAE 工具安装（解决克隆失败 网络问题解决）

FirmAE 工具安装（解决克隆失败 网络问题解决）

FirmAE官方推荐使用Ubuntu 18.04系统进行安装部署&#xff0c;FirmAE工具的安装部署十分简单&#xff0c;只需要拉取工具仓库后执行安装脚本即可。 首先运行git clone --recursive https://kgithub.com/pr0v3rbs/FirmAE命令 拉取FirmAE工具仓库&#xff0c;因为网络的问题&…
阅读更多...
基于Redis实现关注、取关、共同关注及消息推送(含源码)

基于Redis实现关注、取关、共同关注及消息推送(含源码)

微信公众号访问地址&#xff1a;基于Redis实现关注、取关、共同关注及消息推送(含源码) 推荐文章&#xff1a; 1、springBoot对接kafka,批量、并发、异步获取消息,并动态、批量插入库表; 2、SpringBoot用线程池ThreadPoolTaskExecutor异步处理百万级数据; 3、为什么引入Rediss…
阅读更多...
链表之第二回

链表之第二回

欢迎来到我的&#xff1a;世界 该文章收入栏目&#xff1a;链表 希望作者的文章对你有所帮助&#xff0c;有不足的地方还请指正&#xff0c;大家一起学习交流 ! 目录 前言第一题&#xff1a;反转一个链表第二题&#xff1a;链表内指定区间反转第三题&#xff1a;判断一个链表…
阅读更多...
Qt扫盲-QTableView理论总结

Qt扫盲-QTableView理论总结

QTableView理论总结 一、概述二、导航三、视觉外观四、坐标系统五、示例代码1. 性别代理2. 学生信息模型3. 对应视图 一、概述 QTableView实现了一个tableview 来显示model 中的元素。这个类用于提供之前由QTable类提供的标准表&#xff0c;但这个是使用Qt的model/view架构提供…
阅读更多...
【Rust】Rust学习 第十四章进一步认识 Cargo 和 Crates.io

【Rust】Rust学习 第十四章进一步认识 Cargo 和 Crates.io

本章会讨论 Cargo 其他一些更为高级的功能&#xff0c;我们将展示如何&#xff1a; 使用发布配置来自定义构建将库发布到 crates.io使用工作空间来组织更大的项目从 crates.io 安装二进制文件使用自定义的命令来扩展 Cargo Cargo 的功能不止本章所介绍的&#xff0c;关于其全…
阅读更多...
python 使用 pdf2image 库将PDF转换为图片

python 使用 pdf2image 库将PDF转换为图片

在 Ubuntu 上实现网络穿透&#xff1a;手把手教你搭建FRPS服务器 初环境步骤一&#xff1a;安装pdf2image库步骤二&#xff1a;导入必要的库步骤三&#xff1a;指定PDF文件路径步骤四&#xff1a;将PDF转换为图片步骤五&#xff1a;保存图像为图片文件完整代码运行结果 在数字化…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023