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

鼠标拖拽盒子移动

news 2026/5/20 10:27:42

目录

  • 需求
  • 思路
  • 代码
  • 页面展示
  • 【补充】纯js实现

需求

浮动的盒子添加鼠标拖拽功能

思路

  1. 给需要拖动的盒子添加鼠标按下事件
  2. 鼠标按下后获取鼠标点击位置与盒子边缘的距离
  3. 给 document 添加鼠标移动事件
  4. 鼠标移动过程中，将盒子的位置进行重新定位
  5. 侦听 document 鼠标弹起，移除鼠标移动事件

代码

<!-- 鼠标拖拽盒子 -->
<template><div><!-- 【1】给需要拖动的盒子添加鼠标按下事件 --><div ref="btns" class="btns" @mousedown="mousedownHandler">试试拖动我</div></div>
</template><script>
export default {name: 'Drag',components: {},data() {return {mouseToBoxRangeX: 0, // 鼠标点击位置与盒子边缘的距离mouseToBoxRangeY: 0 // 鼠标点击位置与盒子边缘的距离}},computed: {},watch: {},mounted() {// 【5】侦听 document 鼠标弹起，移除鼠标移动事件document.addEventListener('mouseup', () => {document.removeEventListener('mousemove', this.mousemoveHandler)})},methods: {mousedownHandler($event) {// 【2】鼠标按下后获取鼠标点击位置与盒子边缘的距离//  鼠标点击位置与盒子边缘的距离 = 鼠标点击位置 - 盒子当前位置this.mouseToBoxRangeX = $event.pageX - this.$refs.btns.offsetLeftthis.mouseToBoxRangeY = $event.pageY - this.$refs.btns.offsetTop// 【3】给 document 添加鼠标移动事件document.addEventListener('mousemove', this.mousemoveHandler)},mousemoveHandler($event) {// 【4】鼠标移动过程中，将盒子的位置进行重新定位// 盒子当前位置 = 鼠标点击位置 - 鼠标点击位置与盒子边缘的距离 - 盒子自身设定的边距（此处没有）// 【注意】设置盒子最新位置时需加上单位 'px'this.$refs.btns.style.left = $event.pageX - this.mouseToBoxRangeX + 'px'this.$refs.btns.style.top = $event.pageY - this.mouseToBoxRangeY + 'px'}}
}
</script><style lang='scss' scoped>
.btns {width: 70px;height: 147px;position: absolute;bottom: 10px;right: 10px;z-index: 2000;cursor: move;background-color: red;
}
</style>

页面展示

在这里插入图片描述

【补充】纯js实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 100px;height: 100px;background-color: tomato;margin: 100px;}</style></head><body><div class="box"></div><script>/* 效果：鼠标拖着盒子移动拖着：鼠标左键按着不松手（mousedown），然后鼠标移动（mousemove）注意：鼠标左键按下，才注册上了鼠标移动事件*/var box = document.querySelector('.box')// 添加鼠标点击事件box.addEventListener('mousedown', function (e) {console.log('this----', this)console.log('this.offsetLeft----', this.offsetLeft)console.log('this.offsetTop----', this.offsetTop)// 【1】获取鼠标在盒子里的位置// 鼠标的坐标 - 盒子的坐标var x = e.pageX - this.offsetLeftvar y = e.pageY - this.offsetTopconsole.log(x, y)// 注册鼠标移动事件（给整个document添加 事件）document.addEventListener('mousemove', move)function move(e) {// 【2】设置盒子的位置（注意 给盒子添加定位）// 鼠标的坐标 - 鼠标在盒子里的坐标// 【2.1】盒子没有外边距// box.style.left = (e.pageX - x) + 'px';// box.style.top = (e.pageY - y) + 'px';// 【2.2】盒子有外边距box.style.left = e.pageX - x - 100 + 'px'box.style.top = e.pageY - y - 100 + 'px'}// 【3】鼠标弹起，删除移动事件document.addEventListener('mouseup', function () {// 删除鼠标移动事件document.removeEventListener('mousemove', move)})})</script></body>
</html>

相关文章：

鼠标拖拽盒子移动

目录 需求思路代码页面展示【补充】纯js实现 需求 浮动的盒子添加鼠标拖拽功能 思路 给需要拖动的盒子添加鼠标按下事件鼠标按下后获取鼠标点击位置与盒子边缘的距离给 document 添加鼠标移动事件鼠标移动过程中&#xff0c;将盒子的位置进行重新定位侦听 document 鼠标弹起&a…...

编程日记 2023/8/25 9:44:11

AUTOSAR从入门到精通-【应用篇】面向车联网的车辆攻击方法及入侵检测

目录 前言 国内外研究现状 （1）车辆攻击方法的研究 （2）车辆安全防护技术的研究...

编程日记 2023/8/25 9:43:10

0101prox-shardingsphere-中间件

1 启动ShardingSphere-Proxy 1.1 获取 目前 ShardingSphere-Proxy 提供了 3 种获取方式&#xff1a; 二进制发布包DockerHelm 这里我们使用Docker安装。 1.2 使用Docker安装 step1&#xff1a;启动Docker容器 docker run -d \ -v /Users/gaogzhen/data/docker/shardings…...

编程日记 2023/8/25 9:42:09

FactoryBean和BeanFactory：Spring IOC容器的两个重要角色简介

目录 一、简介 二、BeanFactory 三、FactoryBean 四、区别 五、使用场景 总结 一、简介 在Spring框架中&#xff0c;IOC&#xff08;Inversion of Control&#xff09;容器是一个核心组件&#xff0c;它负责管理和配置Java对象及其依赖关系&#xff0c;实现了控制反转&a…...

编程日记 2023/8/25 9:41:08

微服务中间件--分布式搜索ES

分布式搜索ES 11.分布式搜索 ESa.介绍ESb.IK分词器c.索引库操作 (类似于MYSQL的Table)d.查看、删除、修改 索引库e.文档操作 (类似MYSQL的数据)1) 添加文档2) 查看文档3) 删除文档4) 修改文档 f.RestClient操作索引库1) 创建索引库2) 删除索引库/判断索引库 g.RestClient操作文…...

编程日记 2023/8/25 9:40:07

触摸屏与PLC之间 EtherNet/IP无线以太网通信

在实际系统中&#xff0c;同一个车间里分布多台PLC&#xff0c;用触摸屏集中控制。通常所有设备距离在几十米到上百米不等。在有通讯需求的时候&#xff0c;如果布线的话&#xff0c;工程量较大耽误工期&#xff0c;这种情况下比较适合采用无线通信方式。 本方案以MCGS触摸屏和…...

编程日记 2023/8/25 9:39:05

Crontab定时任务运行Docker容器（Ubuntu 20）

对于一些离线预测任务&#xff0c;或者D1天的预测任务&#xff0c;可以简单地采用Crontab做定时调用项目代码运行项目 Crontab简介&#xff1a; Linux crontab命令常见于Unix和类Unix的操作系统之中&#xff0c;用于设置周期性被执行的指令。该命令从标准输入设备读取指令&…...

编程日记 2023/8/25 9:38:03

Fegin异步情况丢失上下文问题

在微服务的开发中&#xff0c;我们经常需要服务之间的调用&#xff0c;并且为了提高效率使用异步的方式进行服务之间的调用&#xff0c;在这种异步的调用情况下会有一个严重的问题&#xff0c;丢失上文下 通过以上图片可以看出异步丢失上下文的原因是不在同一个线程&#xff0c…...

编程日记 2023/8/25 9:37:01

《Linux从练气到飞升》No.17 进程创建

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…...

编程日记 2023/8/25 9:35:58

python + pyside2，pyside6，运行错误

在visual studio code运行pyside的时候报错 qt.qpa.plugin: Could not find the Qt platform plugin “windows“ in 后来发现在cmd命令行可以正常运行&#xff0c;应该是VScode和虚拟机类似的问题。 额外设置一下环境变量就可以了。 执行print(os.path.dirname(PySide6.__f…...

编程日记 2023/8/25 9:34:57

第60步 深度学习图像识别：误判病例分析（Pytorch）

基于WIN10的64位系统演示 一、写在前面 上期内容基于Tensorflow环境做了误判病例分析&#xff08;传送门&#xff09;&#xff0c;考虑到不少模型在Tensorflow环境没有迁移学习的预训练模型&#xff0c;因此有必要在Pytorch环境也搞搞误判病例分析。 本期以SqueezeNet模型为…...

编程日记 2023/8/25 9:33:54

基于Java+SpringBoot+vue前后端分离夕阳红公寓管理系统设计实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…...

编程日记 2023/8/25 9:32:53

远控木马病毒分析

一、病毒简介 SHA256:880a402919ba4e896f6b4b2595ecb7c06c987b025af73494342584aaa84544a1 MD5:0902b9ff0eae8584921f70d12ae7b391 SHA1:f71b9183e035e7f0039961b0ac750010808ebb01 二、行为分析 同样在我们win7虚拟机中&#xff0c;使用火绒剑进行监控&#xff0c;分析行为…...

编程日记 2023/8/25 9:31:52

线性代数的学习和整理7：各种特殊效果矩阵汇总

目录 1 矩阵 1.1 1维的矩阵 1.2 2维的矩阵 1.3 没有3维的矩阵---3维的是3阶张量 1.4 下面本文总结的都是各种特殊效果矩阵特例 2 方阵: 正方形矩阵 3 单位矩阵 3.1 单位矩阵的定义 3.2 单位矩阵的特性 3.3 为什么单位矩阵I是 [1,0;0,1] 而不是[0,1;1,0] 或[1,1;1,1]…...

编程日记 2023/8/25 9:30:51

[git]github上传大文件

github客户端最高支持100Mb文件上传&#xff0c;如果要>100M只能用git-lfs&#xff0c;但是测试发现即使用git lfs&#xff0c;我上传2.5GB也不行&#xff0c;测试737M文件可以&#xff0c;GitHub 目前 Git LFS的总存储量为1G左右&#xff0c;超过需要付费。(上传失败时&…...

编程日记 2023/8/25 9:29:49

element ui - el-select获取点击项的整个对象item

1.背景 在使用 el-select 的时候&#xff0c;经常会通过 change 事件来获取当前绑定的 value &#xff0c;即对象中默认的某个 value 值。但在某些特殊情况下&#xff0c;如果想要获取的是点击项的整个对象 item&#xff0c;该怎么做呢&#xff1f; 2.实例 elementUI 中是可…...

编程日记 2023/8/25 9:28:47

实现SSM简易商城项目的购物车实现

实现SSM简易商城项目的购物车实现 在这篇博客中&#xff0c;我们将使用SSM框架来实现一个简易的购物车功能。我们将使用Spring框架来管理Bean&#xff0c;使用SpringMVC框架来处理HTTP请求&#xff0c;使用MyBatis框架来操作数据库。 实现SSM简易商城项目的购物车功能的思路如…...

编程日记 2023/8/25 9:27:46

【学习FreeRTOS】第17章——FreeRTOS任务通知

1.任务通知的简介 任务通知&#xff1a;用来通知任务的&#xff0c;任务控制块中的结构体成员变量 ulNotifiedValue就是这个通知值。 使用队列、信号量、事件标志组时都需另外创建一个结构体&#xff0c;通过中间的结构体进行间接通信&#xff01; 使用任务通知时&#xff0c…...

编程日记 2023/8/25 9:26:44

GO-vscode远程开发和调试

本文内容主要包括&#xff1a; 概述&#xff1a; 主要就是把代码放到服务器上然后远程去开发和调试 工具&#xff1a; vscode 远程端&#xff1a; linux 一.安装远程插件 vscode安装Remote - SSH&#xff0c;Remote Explorer&#xff0c;Remote Development&#xff0c…...

编程日记 2023/8/25 9:25:43

【笔记】判断两个Double类型的值是否相同

在Java中&#xff0c;将两个double值转换为String类型&#xff0c;然后使用equals方法进行比较是一个常见的做法&#xff0c;但是这种方法并不是完全可靠&#xff0c;特别是在涉及浮点数的精度时仍然可能会遇到问题。 浮点数在内部以二进制表示&#xff0c;有时会存在舍入误差…...

编程日记 2023/8/25 9:24:42

深入了解Linux命名空间的cgroups：打开容器技术的黑匣子

cgroups&#xff0c;全称为 Control Groups&#xff0c;是 Linux 内核提供的一种强大的资源管理机制。它的核心作用是将一组进程&#xff08;tasks&#xff09;组织成一个层级化的组&#xff0c;并为这些组分配、限制和监控资源的使用情况。 简单来说&#xff0c;cgroups 允许系…...

编程新知 2026/5/20 10:07:28

高数函数定义域避坑指南：从‘x不能为零’到抽象函数，手把手教你识别题目陷阱

高数函数定义域避坑指南&#xff1a;从‘x不能为零’到抽象函数&#xff0c;手把手教你识别题目陷阱 考前冲刺阶段&#xff0c;函数定义域问题往往是高数考试中的"隐形杀手"。许多学生明明掌握了复杂计算技巧&#xff0c;却在基础定义域判断上频频失分。本文将直击五…...

编程新知 2026/5/20 9:36:42

专业休闲卤味零食包装设计公司排名榜单盘点-哲仕设计上榜

专业休闲卤味零食包装设计公司排名榜单盘点-哲仕设计上榜休闲卤味零食属于大众刚需休闲食品&#xff0c;涵盖肉类卤制熟食、素菜卤味小吃、真空独立卤包、常温即食卤品、麻辣风干肉干、组合卤味礼盒等品类&#xff0c;广泛适用于居家休闲解馋、办公下午茶加餐、追剧娱乐食用、出…...

编程新知 2026/5/20 9:34:35

嵌入式网络硬件设计避坑指南：如何为你的SOC选配合适的PHY芯片与接口（MII/RMII实战解析）

嵌入式网络硬件设计避坑指南&#xff1a;如何为你的SOC选配合适的PHY芯片与接口&#xff08;MII/RMII实战解析&#xff09; 在嵌入式系统设计中&#xff0c;网络功能已成为现代智能设备的标配需求。无论是工业控制、物联网终端还是消费电子产品&#xff0c;稳定可靠的网络连接往…...

编程新知 2026/5/20 9:21:24

告别WMMA API：用PTX的LDMATRIX和MMA指令在Ampere架构上重构你的FP16矩阵乘法内核

从WMMA到PTX&#xff1a;在Ampere架构上重构FP16矩阵乘法的深度实践 当开发者第一次接触Nvidia的Tensor Core编程时&#xff0c;WMMA&#xff08;Warp Matrix Multiply Accumulate&#xff09;API往往是首选方案。这套高层抽象接口屏蔽了硬件细节&#xff0c;让开发者能够快速实…...

编程新知 2026/5/20 7:46:16

VS2019编译OpenCASCADE 7.6.0避坑实录：从custom.bat修改到Demo测试，一次搞定

VS2019编译OpenCASCADE 7.6.0全流程避坑指南 在三维建模与CAD开发领域&#xff0c;OpenCASCADE作为开源几何内核引擎&#xff0c;其强大的BRep建模和STEP文件处理能力备受开发者青睐。然而对于初次接触OCC的Windows平台开发者而言&#xff0c;在Visual Studio 2019环境下完成从…...

编程新知 2026/5/20 5:32:58

STR71X芯片JTAG失效分析与Bootloader恢复指南

1. STR71X设备JTAG接口失效的典型场景分析当使用Keil MDK开发环境和ULINK2调试器连接STR71X系列芯片时&#xff0c;开发者常会遇到"Couldnt stop ARM device"的错误提示。这种情况通常发生在两种典型场景&#xff1a;芯片意外进入了低功耗模式&#xff08;Power-down…...

编程新知 2026/5/20 4:44:15

PostgreSQL列式存储革命：cstore_fdw完整指南与10个性能优化技巧

PostgreSQL列式存储革命&#xff1a;cstore_fdw完整指南与10个性能优化技巧 【免费下载链接】cstore_fdw Columnar storage extension for Postgres built as a foreign data wrapper. Check out https://github.com/citusdata/citus for a modernized columnar storage implem…...

编程新知 2026/5/20 4:32:11

8051中断向量冲突与Keil调试问题解决方案

1. 问题现象与背景分析最近在调试基于MCBx51评估板的8051应用程序时&#xff0c;遇到了一个相当诡异的现象&#xff1a;原本在评估版上运行正常的程序&#xff0c;移植到实际硬件后出现了异常行为&#xff0c;甚至导致调试连接中断。最典型的错误提示就是"CONNECTION TO T…...

编程新知 2026/5/20 3:23:31

自主Agent的下一代智能系统

如果说上一代AI是“单打独斗”的数字大脑&#xff0c;那么自主Agent&#xff08;智能体&#xff09;的下一代——“人机环境系统智能”&#xff0c;就是“人机共生”的实体生态。它标志着AI正在从虚拟的比特世界&#xff0c;跨越到与人类、物理环境深度融合的现实世界。我们可以…...

编程新知 2026/5/20 1:58:08