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

鼠标拖拽盒子移动

news 2026/3/30 10:45:16

目录

  • 需求
  • 思路
  • 代码
  • 页面展示
  • 【补充】纯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

终极指南：简单快速解决C盘爆红的Windows清理工具

终极指南&#xff1a;简单快速解决C盘爆红的Windows清理工具 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你的C盘是不是又红了&#xff1f;电脑卡得像蜗牛爬&a…...

编程新知 2026/3/30 9:51:57

SpringBoot+Mybatis多数据源实战：TDengine与MySQL混搭的物联网数据存储方案

SpringBootMybatis多数据源实战&#xff1a;TDengine与MySQL混搭的物联网数据存储方案 在物联网系统开发中&#xff0c;数据存储架构的设计往往面临一个核心矛盾&#xff1a;海量设备时序数据的高效存储与业务数据的复杂关系处理如何平衡&#xff1f;传统单一数据库方案要么在时…...

编程新知 2026/3/30 9:47:56

Ubuntu服务器上配置KVM虚拟化环境：从零搭建Windows开发环境

1. 为什么要在Ubuntu服务器上跑Windows&#xff1f; 很多开发者可能都有这样的困惑&#xff1a;明明手头有性能强劲的Ubuntu服务器&#xff0c;但某些开发工具只能在Windows环境下运行。比如Visual Studio、SQL Server Management Studio这些微软系工具&#xff0c;或者某些行业…...

编程新知 2026/3/30 9:37:52

雪女-斗罗大陆模型案例分享：多种提示词生成不同风格雪女图

雪女-斗罗大陆模型案例分享&#xff1a;多种提示词生成不同风格雪女图 最近在体验“雪女-斗罗大陆-造相Z-Turbo”这个AI绘画模型时&#xff0c;我发现了一个特别有意思的现象&#xff1a;同样一个模型&#xff0c;用不同的提示词描述&#xff0c;能画出风格迥异的雪女形象。有…...

编程新知 2026/3/30 8:41:30

ncmdump：突破NCM格式限制的音频转换解决方案

ncmdump&#xff1a;突破NCM格式限制的音频转换解决方案 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 问题场景&#xff1a;数字音乐格式的兼容性困境 在流媒体音乐服务普及的今天&#xff0c;网易云音乐采用的NCM加密格式成为了…...

编程新知 2026/3/30 8:33:27

hnswlib高级功能全解：多线程搜索/动态更新/过滤器实战指南

hnswlib高级功能全解&#xff1a;多线程搜索/动态更新/过滤器实战指南 【免费下载链接】hnswlib Header-only C/python library for fast approximate nearest neighbors 项目地址: https://gitcode.com/gh_mirrors/hn/hnswlib hnswlib是一个高效的Header-only C/Python…...

编程新知 2026/3/30 8:17:22

Qwen3-Reranker-0.6B与Java后端服务集成实战

Qwen3-Reranker-0.6B与Java后端服务集成实战 1. 为什么需要在Java服务中集成重排序模型 在企业级搜索和推荐系统中&#xff0c;我们经常遇到这样的场景&#xff1a;用户输入一个查询词&#xff0c;系统从千万级文档库中召回前100个候选结果&#xff0c;但这些结果的排序质量往…...

编程新知 2026/3/30 8:07:19

计算机网络知识应用：保障分布式StructBERT微服务集群通信

计算机网络知识应用&#xff1a;保障分布式StructBERT微服务集群通信 最近在搞一个基于StructBERT模型的智能问答系统&#xff0c;随着用户量上来&#xff0c;单台服务器明显扛不住了&#xff0c;响应慢不说&#xff0c;还动不动就挂掉。没办法&#xff0c;只能上微服务集群&a…...

编程新知 2026/3/30 6:38:52

TwinCAT界面美化指南：3步搞定背景主题切换（附最佳配色方案推荐）

TwinCAT界面美化实战&#xff1a;从主题定制到高效编程的视觉优化 每次打开TwinCAT开发环境&#xff0c;是否觉得默认的灰白色调让人昏昏欲睡&#xff1f;作为工业自动化领域的核心开发工具&#xff0c;TwinCAT的界面美学长期被工程师们忽视。实际上&#xff0c;一个精心调校的…...

编程新知 2026/3/30 5:30:22

OpenClaw隐私保护设计：GLM-4.7-Flash本地处理医疗笔记整理

OpenClaw隐私保护设计&#xff1a;GLM-4.7-Flash本地处理医疗笔记整理 1. 为什么医疗数据必须留在本地&#xff1f; 去年帮家人整理慢性病就诊记录时&#xff0c;我遇到一个两难选择&#xff1a;要么手动整理上百张化验单和处方笺&#xff0c;要么使用云端OCR工具自动处理。当…...

编程新知 2026/3/30 5:12:14