当前位置: 首页 > news >正文

vue实现在页面拖拽放大缩小div并显示鼠标在div的坐标

1、功能要求:

实现在一个指定区域拖拽div,并可以放大缩小,同时显示鼠标在该div里的坐标,如图可示

在这里插入图片描述
缩小并拖动
在这里插入图片描述

2、实现

     <div class="div_content" ref="div_content"><div class="div_image" id="pic":style="{'zoom':zoom,'transform':'translate('+moveX+'px,'+moveY+'px)',}"@mousedown.stop="mousedown($event)" @mousemove="handleMouseMove" @mouseleave="mouseout"></div><div class="div_image_tool"><img src="..." class="div_add " @click="add_img"><div class="heng"></div><img src="..." class="div_add div_decrease" @click="dec_img"></div></div><div class="div_axirs">X:{{ux}} Y:{{uy}}</div>

js代码

data(){return{ux: 0,uy: 0,moveX: 0,//X轴移动的距离moveY: 0,startx: '',//鼠标的初始位置starty: '',endx: 0,endy: 0,zoom: 1,//放大的倍数
}
},
methods:{add_img() {this.zoom <= 10 ? this.zoom = this.zoom + 0.5 : ''},dec_img() {this.zoom > 0.5 ? this.zoom = this.zoom - 0.5 : ''},mousedown(e) {// 绑定mousemovethis.startx = this.formatXY(e.pageX / this.zoom); this.starty = this.formatXY(e.pageY / this.zoom)document.onmousemove = (e) => {this.moveX = this.formatXY(e.pageX / this.zoom) - this.startx + this.endxthis.moveY = this.formatXY(e.pageY / this.zoom) - this.starty + this.endye.preventDefault()};document.onmouseup = (e) => {// 解除绑定mousemovedocument.onmousemove = null;this.endx = this.moveXthis.endy = this.moveY;}},mouseout() {var that = this;that.ux = 0;that.uy = 0;},handleMouseMove(e) {this.getAxis(e)},getAxis(e) {this.ux = this.formatXY(e.offsetX / this.zoom);this.uy = this.formatXY(e.offsetY / this.zoom);
},formatXY(num) {return num.toFixed(0)},}

css

  .div_content {position: relative;width: 600px;height: 580px !important;margin: 0 20px;overflow: hidden;background: rgb(230, 229, 229);}.div_image {height: 400px;width: 400px;background: white;margin: 100px auto auto 100px !important;}

相关文章:

vue实现在页面拖拽放大缩小div并显示鼠标在div的坐标

1、功能要求&#xff1a; 实现在一个指定区域拖拽div,并可以放大缩小&#xff0c;同时显示鼠标在该div里的坐标&#xff0c;如图可示 缩小并拖动 2、实现 <div class"div_content" ref"div_content"><div class"div_image" id"…...

LuatOS-SOC接口文档(air780E)-- io - io操作(扩展)

示例 -- io模块是lua原生模块,LuatOS增加了一些API -- 请配合os模块一起使用-- 只读模式, 打开文件 local fd io.open("/xxx.txt", "rb") -- 读写默认,打开文件 local fd io.open("/xxx.txt", "wb") -- 写入文件,且截断为0字节 loc…...

【数据结构】线性表(六)堆栈:顺序栈及其基本操作(初始化、判空、判满、入栈、出栈、存取栈顶元素、清空栈)

文章目录 一、堆栈1. 定义2. 基本操作 二、顺序栈0. 顺序表1. 头文件和常量2. 栈结构体3. 栈的初始化4. 判断栈是否为空5. 判断栈是否已满6. 入栈7. 出栈8. 查看栈顶元素9. 清空栈10. 主函数11. 代码整合 堆栈Stack 和 队列Queue是两种非常重要的数据结构&#xff0c;两者都是特…...

父组件可以监听到子组件的生命周期吗?

在 Vue 中,父组件是可以监听到子组件的生命周期的。Vue 提供了一些特殊的钩子函数,可以在父组件中监听子组件的生命周期事件。 以下是一些常用的方法来监听子组件的生命周期: 1:使用$emit: 在子组件的生命周期钩子函数中,使用 $emit 方法触发自定义事件,向父组件发送通…...

[开源]MIT开源协议,基于Vue3.x可视化拖拽编辑,页面生成工具

一、开源项目简介 AS-Editor 基于 Vue3.x 可视化拖拽编辑&#xff0c;页面生成工具。提升前端开发效率&#xff0c;可集成至移动端项目作为通过定义 JSON 直接生成 UI 界面。 二、开源协议 使用MIT开源协议 三、界面展示 四、功能概述 基于Vue可视化拖拽编辑&#xff0c;…...

【C++ Primer Plus学习记录】数组的替代品

目录 1.模板类vector 2.模板类array&#xff08;C11&#xff09; 3.比较数组、vector对象和array对象 模板类vector和array是数组的替代品。 1.模板类vector 模板类vector类似于string类&#xff0c;也是一种动态数组。您可以在运行阶段设置vector对象的长度&#xff0c;可…...

JSP免杀马

JSP免杀马 随着Java框架的进化和程序员的内卷&#xff0c;使用PHP编写的系统越来少&#xff0c;使用Java编写的系统越来越多。JSP马的使用越来越多&#xff0c;但是就目前来看&#xff0c;各大厂商对JSP马的查杀效果还是不尽人意。这里简单通过Java的反射机制和ClassLoader技术…...

2023-10-16 node.js-调用python-记录

NodeJS 作为后端&#xff0c;仅在需要时调用 Python 在某些特殊的场景下&#xff0c;比如复杂耗时的数据处理和运算时&#xff0c;我们可以用 Python 脚本编写&#xff0c;然后使用 Node 的子进程调用 Python 脚本即可&#xff0c;这样可以提升效率。如下代码&#xff0c;我们…...

Kotlin 设置和获取协程名称

1&#xff0c;设置写成名称 创建协程作用域是或者创建协程是有个上下文参数&#xff08;context: CoroutineContext&#xff09; 创建协程作用域 CoroutineScope(Dispatchers.IO CoroutineName("协程A"))//Dispatchers.IO根据实际情况设置可有可无 源码&#xf…...

awk命令的使用

1.概念&#xff1a; awk是Linux以及UNIX环境中现有的功能最强大的数据处理工具 awk是一种处理文本数据的编程语言。awk的设计使得它非常适合于处理由行和列组成的文本数据 awk程序可以读取文本文件&#xff0c;对数据进行排序&#xff0c;对其中的数值执行计算以及生成报表等…...

【面试系列】Vue

引言&#xff1a;下面是一些常见的 Vue 面试题和对应的答案 目录 1. Vue 是什么&#xff1f;它有哪些特点&#xff1f;2. Vue 的生命周期有哪些&#xff1f;请简要描述每个生命周期的作用。3. Vue 组件间通信的有哪些方式&#xff1f;4. Vue 的 computed 和 watch 的区别是什么…...

揭开MyBatis的神秘面纱:掌握动态代理在底层实现中的精髓

一日小区漫步&#xff0c;我问朋友&#xff1a;Mybatis中声明一个interface接口&#xff0c;没有编写任何实现类&#xff0c;Mybatis就能返回接口实例&#xff0c;并调用接口方法返回数据库数据&#xff0c;你知道为什么不&#xff1f; 朋友很是诧异&#xff1a;是啊&#xff…...

结合领域驱动设计,理解TOGAF之架构方法论

TOGAF&#xff08;The Open Group Architecture Framework&#xff09;是一个开放的架构方法论&#xff0c;旨在支持组织制定和实施企业架构。它提供了一种框架来创建和管理企业架构&#xff0c;并包含了一组最佳实践&#xff0c;帮助组织实现其业务目标。 TOGAF框架包括四个主…...

Vue-vue项目Element-UI 表单组件内容要求判断

整体添加判断 <el-formref"ruleFormRef":model"formModel"class"demo-ruleForm"label-position"top"status-icon:rules"rules"><el-form-item label"姓名" prop"applyUsers" class"form-…...

【试题027】C语言宏定义小例题

1.题目&#xff1a; #define MOD(a,b) a%b int main() { int x4,y16,z; zMOD(y,x); printf("%dn".z)&#xff1b;} 则程序执行的结果是? 2.代码分析&#xff1a; #include <stdio.h> #define MOD(a,b) a%b int main() {int x 4, y 16, z;z MOD(y, …...

解决 sharp: Installation error: unable to verify the first certificate

使用 plasmo 时报错如下&#xff1a; E:\chromeplugins>pnpm create plasmo ../.pnpm-store/v3/tmp/dlx-46852 | 2 ../.pnpm-store/v3/tmp/dlx-46852 | Progress: resolved 2, reused 2, downloaded 0, added 2, done &#x1f7e3; Plasmo v0.83.0 &…...

【Java】Java实现100万+ 的高并发、高性能设计

Java实现100万 的高并发、高性能设计 1、简述 现百万级并发编是一项综合性的技术&#xff0c;同时&#xff0c;它与现实生活中 的场景有着紧密的联系。 搞懂并发编程有三大核心问题 分工问题 同步问题 互斥问题 本文就对这三大核心问题进行简单的介绍 2、分工问题 关于分工…...

linux系统下,在vscode的命令行中调试python文件

首先参考vscode官网文档Command line debugging 步骤 1&#xff08;只需一次&#xff09;&#xff1a;安装debugpy 步骤 2&#xff1a;在命令行中运行 python -m debugpy --listen 5678 --wait-for-client -m dir1.dir2.your_script 以上命令使用了端口5678&#xff0c;也可…...

DFS(分布式文件系统)与 DFSR(分布式文件系统复制)的区别

DFS&#xff08;分布式文件系统&#xff09;和 DFSR&#xff08;分布式文件系统复制&#xff09;是两种不同的技术&#xff0c;尽管它们在名称上有一些相似之处&#xff0c;但它们的用途和功能有所不同。 DFS&#xff08;分布式文件系统&#xff09; DFS 是一种用于创建和管理…...

丈母娘说:有编制的不如搞编程的

10月17日百度世界大会召开&#xff0c;据说文心大模型又牛X了&#xff0c;综合水平相比GPT4毫不逊色&#xff0c;真是个让人激动的消息&#xff0c;国产大模型的进展可以说是日新月异&#xff0c;我这耳朵边一直响彻四个字&#xff1a;遥遥领先。 不过今天我关注的重点不是什么…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...