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

vue中实现元素在界面中自由拖动

article 2026/2/24 1:38:06

这是一个使用 Vue 2 实现可拖动 div 的示例。

<!DOCTYPE html>
<html>
<head><title>Vue 2 可拖动 Div</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>#draggable-div {position: absolute;width: 200px;height: 200px;background-color: #4CAF50;color: white;text-align: center;line-height: 200px;cursor: move;user-select: none;}</style>
</head>
<body><div id="app"><div id="draggable-div"@mousedown="startDrag":style="{ left: `${posX}px`, top: `${posY}px` }">拖动我</div></div><script>new Vue({el: '#app',data: {posX: 100,posY: 100,isDragging: false,offsetX: 0,offsetY: 0},methods: {startDrag(event) {this.isDragging = true;// 计算鼠标点击位置与 div 左上角的偏移this.offsetX = event.clientX - this.posX;this.offsetY = event.clientY - this.posY;// 添加全局事件监听document.addEventListener('mousemove', this.onDrag);document.addEventListener('mouseup', this.stopDrag);},onDrag(event) {if (this.isDragging) {// 更新 div 位置this.posX = event.clientX - this.offsetX;this.posY = event.clientY - this.offsetY;}},stopDrag() {this.isDragging = false;// 移除全局事件监听document.removeEventListener('mousemove', this.onDrag);document.removeEventListener('mouseup', this.stopDrag);}}});</script>
</body>
</html>

这个示例实现了一个可拖动的 div，具体特点如下：

  1. 使用 Vue 2 实现拖动逻辑
  2. 通过 mousedown、mousemove 和 mouseup 事件控制拖动
  3. 添加了鼠标偏移计算，使得拖动更加自然
  4. 使用 :style 绑定 div 的位置
  5. 通过 CSS 设置 cursor: move 提示可拖动
  6. 添加 user-select: none 防止文字选中干扰拖动

主要实现步骤：

  • startDrag 方法：记录鼠标点击的初始位置和偏移
  • onDrag 方法：实时更新 div 位置
  • stopDrag 方法：结束拖动并移除事件监听

你可以直接在浏览器中打开这个 HTML 文件，就能看到可拖动的绿色 div。

需要注意的是，这是一个基础实现。对于更复杂的拖动需求，建议使用 Vue Draggable 等专业的拖动库。

相关文章：

vue中实现元素在界面中自由拖动

这是一个使用 Vue 2 实现可拖动 div 的示例。 <!DOCTYPE html> <html> <head><title>Vue 2 可拖动 Div</title><script src"https://cdn.jsdelivr.net/npm/vue2.6.14/dist/vue.js"></script><style>#draggable-div…...

编程日记 2025/7/25 19:07:21

量子计算在密码学中的应用：机遇与挑战并存

引言 在数字化时代的浪潮中&#xff0c;密码学作为信息安全的核心技术&#xff0c;始终扮演着至关重要的角色。从保护个人隐私到保障国家机密&#xff0c;密码学的每一次进步都为信息安全筑牢了防线。然而&#xff0c;随着量子计算技术的飞速发展&#xff0c;传统密码学体系面…...

编程日记 2026/2/16 20:07:30

使用go实现导入Rxcel数据到数据库并渲染到页面上

github.com/360EntSecGroup-Skylar/excelize github.com/tealeg/xlsx 可以使用以上两个库 代码如下&#xff1a; // jsonResult 返回 JSON 格式的结果 func (c *TemplateController) jsonResult(code int, msg string, data interface{}) {c.Data["json"] map[s…...

编程日记 2026/2/15 0:07:36

C++中将记录集的数据复制到Excel工作表中的CRange类CopyFromRecordset函数异常怎么捕获

文章目录 一、异常类型及捕获逻辑二、完整代码示例三、关键错误场景与解决方案1. CopyFromRecordset 返回空数据2. COM错误 0x800A03EC3. Excel进程残留4. 内存不足 四、调试与日志记录1. 启用详细日志2. 捕获错误描述3. 调试断点 五、最佳实践 在C中使用 CRange::CopyFromReco…...

编程日记 2026/2/23 13:16:48

使用vector构造杨辉三角形

力扣118题&#xff1a; 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 1: 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]]示例 2: 输入: numRows 1…...

编程日记 2026/2/23 22:15:31

conda环境下解决gitk乱码模糊

关键词 conda、git、gitk、git gui、模糊、linux、乱码 现象 操作系统&#xff1a;ubuntu24.04 conda版本&#xff1a;25.1.1 正常的终端里gitk显示不会模糊 但是在conda创建的python虚拟环境中使用gitk&#xff0c;字体开始变得模糊不清 分析 根据deepseek的原因原因分析…...

编程日记 2026/2/18 5:50:51

Contactile三轴触觉传感器：多维力感赋能机器人抓取

在非结构化环境中&#xff0c;机器人对物体的精准抓取与操作始终面临巨大挑战。传统传感器因无法全面感知触觉参数&#xff08;如三维力、位移、摩擦&#xff09;&#xff0c;难以适应复杂多变的场景。Contactile推出的三轴触觉力传感器&#xff0c;通过仿生设计与创新光学技术…...

编程日记 2026/2/20 18:39:16

远程登录服务(ssh)

一、远程登录服务概述 1. 概念 远程登录服务就像是一个神奇的桥梁&#xff0c;它让你能够跨越物理距离&#xff0c;通过网络连接到另一台计算机上进行操作。无论你身在何处&#xff0c;只要有网络连接&#xff0c;你就可以像坐在目标计算机前一样进行各种操作。 2. 功能 分享…...

编程日记 2026/2/21 1:36:07

如何在阿里云linux主机上部署Node.Js

在阿里云的Linux服务器上搭建Node.js编程环境可以通过以下步骤完成。这里以常见的 Ubuntu/CentOS 系统为例&#xff0c;提供两种安装方式&#xff08;包管理器、NVM多版本管理&#xff09;&#xff1a; 一、通过包管理器安装&#xff08;适合快速安装指定版本&#xff09; 1. …...

编程日记 2026/2/16 18:34:07

VS Code连接远程服务遇到的问题

目录 一、VS Code链接远程服务 二、修改的文件不能保存 三、无法与 "Ip地址" 建立连接: 远程主机密钥已更改&#xff0c;端口转发已禁用. 四、解决远程连接后&#xff0c;每次断开让输入密码问题&#xff0c;实现免密登录 没有秘钥对&#xff0c;免密配置流程&a…...

编程日记 2026/2/13 1:36:35

算法学习第十六天：动态规划（补充题目）

动态规划题 目录 最大乘积子数组股票买卖问题最长递增子序列零钱兑换编辑距离 最大乘积子数组 问题描述 给定一个整数数组&#xff0c;求乘积最大的连续子数组的乘积。 关键点 需要同时记录当前最大值和最小值&#xff08;负负得正&#xff09;状态转移方程&#xff1a; …...

编程日记 2026/2/15 18:26:05

最长连续子序列和的所含元素 -- Kadane算法拓展

建议先回顾经典Kadane算法 -- 最长连续子序列和&#xff1a; 最大连续子序列和&#xff08;动态规划 -- 经典Kadane算法&#xff09;-CSDN博客 拓展代码&#xff1a; def max_subarray_sum(nums):global_max current_max nums[0]left right temp 0for i in range(1, len(…...

编程日记 2026/2/16 1:16:45

大模型训练 | 智能体知识库 资源收集之心理咨询问答数据集

最近我一直在研究AI大模型相关的内容&#xff0c;想着从现在开始慢慢收集各种各样的资源&#xff0c;万一以后需要训练大模型的时候可以用到&#xff0c;或者自己以后也许会需要。今天我想介绍一组“心理咨询问答数据集”产品&#xff0c;包含9414条心理咨询问答数据&#xff0…...

编程日记 2026/2/23 23:03:57

AI Agent开发大全第十一课-超维空间里的语义翻译官：Embedding技术

一、Embedding：数字世界的"翻译官"与"导航仪" 1.1 从字符到向量的魔法 当我们输入"巧克力"三个字时，传统计算机只能识别ASCII码组成的符号序列，而Embedding技术就像给每个词语配备了"超维定位坐标"。通过深度学习模型，它将离散的…...

编程日记 2026/2/19 4:59:24

2024年第九届全国固态电池研讨会（脱敏）PPT合集（41份）.zip

2024年第九届全国固态电池研讨会&#xff08;脱敏&#xff09;PPT合集&#xff0c;共41份。供大家参考学习。 1、锂金属全固态电池关键材料与器件.pdf 2、聚醚基聚合物锂金属电池.pdf 3、氧化物固态电解质与高能量密度安全固态锂电池.pdf 4、复合固态电解质界面设计工艺探索与…...

编程日记 2026/2/12 14:12:33

OpenCV三维解算常用方法C++

如果标定过程是通过OpenCV张正友标定法实现的&#xff0c;得到的内参外参保存在.txt文件中是这样的形式&#xff1a; ① 内参intrinsics.txt&#xff1a; ② 外参extrinsics.txt&#xff1a; 那么可以通过如下方法读取.txt文件获取左右相机内外参&#xff0c;主要包括三维解算…...

编程日记 2026/2/21 16:22:43

JavaScript 类型转换：全面解析与实践

引言 在 JavaScript 编程里&#xff0c;类型转换是一个频繁出现且极为重要的操作。由于 JavaScript 是一种动态类型语言&#xff0c;变量的类型在运行时可以改变&#xff0c;这就使得类型转换变得十分常见。类型转换主要分为隐式类型转换和显式类型转换&#xff0c;下面将详细…...

编程日记 2026/2/20 5:44:25

Qt Concurrent Filter and Filter-Reduce

并行滤波和滤波-还原 QtConcurrent::filter()、QtConcurrent::filtered() 和 QtConcurrent::filedReduced() 函数并行过滤序列中的项目&#xff0c;如QList 。QtConcurrent::filter() 就地修改序列&#xff0c;QtConcurrent::filtered() 返回包含过滤内容的新序列&#xff0c;…...

编程日记 2026/2/14 5:20:42

【蓝桥杯每日一题】3.25

&#x1f3dd;️专栏&#xff1a; 【蓝桥杯备篇】 &#x1f305;主页&#xff1a; f狐o狸x “OJ超时不是终点&#xff0c;是算法在提醒你该优化时间复杂度了&#xff01;” 目录 3.25 差分数组 一、一维差分 题目链接&#xff1a; 题目描述&#xff1a; 解题思路&#xff1a;…...

编程日记 2026/2/22 21:43:23

深挖增长内核：好产品驱动增长的全方位解析

年前在老板的带领下深入学习了《增长黑客》&#xff0c;并思考了在CPS站外引流的落地方案&#xff0c;最近刚好在做京东联盟的京粉推客增长体系建设&#xff0c;再次回顾一下增长黑客方法以及记录一下思考。 好产品才是增长的根本。增长黑客理念风靡&#xff0c;“啊哈时刻” 概…...

编程日记 2026/2/16 11:58:06

Python技术栈与数据可视化创意实践详解（三）

Python在数据可视化领域凭借丰富的库和灵活的生态系统&#xff0c;能够实现从基础图表到复杂交互式可视化的全场景覆盖。以下从技术选型、创意实现到实战优化进行系统化解析&#xff0c;并提供可直接落地的代码示例。 一、Python数据可视化技术栈 1. 基础与统计可视化 Matplotl…...

编程日记 2026/2/16 8:29:54

前端NVM安装

https://v0.dev/chat/settings 本地启动环境 1安装 nvm 2安装node nvm install v18.19.0 nvm install v20.9.0 nvm use 18 node -v 3安装 pnpm npm install -g pnpm 或者 npm i -g pnpm 4启动 代码 目录下 执行 pnpm i pnpm run dev 4.1到代码目录下 4.2直接cmd…...

编程日记 2026/2/16 12:12:45

Springboot应用配置github自动流部署 深入理解CI/CD：构建、测试和部署的自动化完整流程

什么是 CI 持续集成 通过自动化的流程和工具&#xff0c;提高软件开发的效率、质量和交付速度。 持续集成是开发团队通过将代码的不同部分集成到共享存储库中&#xff0c;并频繁地进行构建和测试&#xff0c;以确保代码的一致性和稳定性。 概念 在现在的开发模式中&#x…...

编程日记 2026/2/22 2:34:12

解锁DeepSeek潜能：Docker+Ollama打造本地大模型部署新范式

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《深度探秘&#xff1a;AI界的007》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、什么是Docker 2、什么是Ollama 二、准备工作 1、操…...

编程日记 2026/2/20 2:03:36

c++R 格式

问题描述 小蓝最近在研究一种浮点数的表示方法&#xff1a;RR 格式。对于一个大于 0 的浮点数 dd&#xff0c;可以用 RR 格式的整数来表示。给定一个转换参数 nn&#xff0c;将浮点数转换为 RR 格式整数的做法是: 将浮点数乘以 2n2n&#xff1b; 四舍五入到最接近的整数。 …...

编程日记 2026/2/20 3:28:39

qt QOffscreenSurface详解

1、概述 QOffscreenSurface 是 Qt 中用于离屏渲染的一个类。它允许在不直接与屏幕交互的情况下进行 OpenGL 渲染操作&#xff0c;常用于生成纹理、预渲染场景等。通过 QOffscreenSurface&#xff0c;可以在后台创建一个渲染表面&#xff0c;进行绘制操作&#xff0c;并将结果捕…...

编程日记 2026/2/15 15:26:14

基于Spring Boot的消防物资存储系统的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2026/2/22 1:10:01

深度学习算法清单

目录 1. 神经网络必备基础知识点 2. 神经网络前向传播与反向传播 3. 网络模型整体架构分析实例 4. 神经网络建模效果分析 5. 激活函数与过拟合问题解决 6. 卷积神经网络核心知识点 7. 卷积建模流程与各参数作用分析 8. 池化层的作用与效果 9. 经典卷积神经网络架构分析…...

编程日记 2026/2/18 3:11:13

docker ssh远程连接

目录 操作命令&#xff1a; 确保 SSH 配置允许 root 登录&#xff1a; docker提交&#xff1a; 操作命令&#xff1a; # 进入容器 docker exec -ti lbg04 /bin/bash# 更新包管理并安装 SSH 服务&#xff08;Ubuntu/Debian 示例&#xff09; apt-get update apt-get install…...

编程日记 2026/2/16 20:07:54

leetcode 20.有效括号

20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; class Solution:def isValid(self, s: str) -> bool:stack []for i in s :if i in ((,{,[ ):stack.append(i)elif i in () ):# 这种情况是 栈弹出元素为空时候 &#xff0c;右半部分的括号多出来一些 比如&#x…...

编程日记 2026/2/15 13:22:04