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

【html弹框拖拽和div拖拽功能】原生html页面引入vue语法后通过自定义指令简单实现div和弹框拖拽功能

news 2025/9/6 23:49:26

前言

这是html版本的。只是引用了vue的语法。
这是很多公司会出现的一种情况，就是原生的页面，引入vue的语法开发
这就导致有些vue上很简单的功能。放到这里需要转换一下
以前写过一个vue版本的帖子，现在再加一个html版本的。

另一个vue版本

需要看vue版本的，直接点击这里我另一个帖子看
跳转链接

效果图

这是弹框的可以拖动，并且不会超出页面，到了边缘就会停止拖不出去了。
在这里插入图片描述
这里一样的，div按住拖拽，这种是可以超出页面范围的

div拖拽代码

核心就是下面的自定义指令生成。
然后再div上面添加v-drag就可以使用了，很简单


<!DOCTYPE html>
<html><head><meta charset='UTF-8'><!-- 公共css文件 --><link rel="stylesheet" href="/statics/css/common/common.css"><!-- 公共js --><script src="/statics/vue_element/common.js"></script><!-- vue部分依赖 --><link rel="stylesheet" href="/statics/vue_element/element.css"><script src="/statics/vue_element/vue.js"></script><script src="/statics/vue_element/element.js"></script><script src="/statics/vue_element/axios.js"></script><!-- 引入vue类型组件 --><title>div拖拽模板</title>
</head><body><div id="app"><div class="wrap"><div v-drag class="box">按住拖拽</div></div></div>
</body>
<script>new Vue({el: '#app',directives: {// 自定义指令 实现可拖动drag(el, bindings) {el.onmousedown = function (e) {var disx = e.pageX - el.offsetLeft;var disy = e.pageY - el.offsetTop;document.onmousemove = function (e) {el.style.left = e.pageX - disx + "px";el.style.top = e.pageY - disy + "px";};document.onmouseup = function () {document.onmousemove = document.onmouseup = null;};};},},data() {return {};},methods: {}})
</script>
<style scoped>.box {height: 100px;width: 100px;background-color: #ccc;position: absolute;top: 200px;left: 100px;cursor: pointer;font-size: 20px;}.wrap {position: relative;}
</style></html>

弹框拖拽代码

这里也是一样的，我这里使用elementul的弹框组件
直接就是鼠标放到弹框的头部就会变成可移动的箭头。按住拖动。
功能实现也是自定义指令，然后再弹框上放一个v-drag就可以了。
注意是加载el-dialog标签上的。别加错了

<!DOCTYPE html>
<html><head><meta charset='UTF-8'><!-- 公共css文件 --><link rel="stylesheet" href="/statics/css/common/common.css"><!-- 公共js --><script src="/statics/vue_element/common.js"></script><!-- vue部分依赖 --><link rel="stylesheet" href="/statics/vue_element/element.css"><script src="/statics/vue_element/vue.js"></script><script src="/statics/vue_element/element.js"></script><script src="/statics/vue_element/axios.js"></script><!-- 引入vue类型组件 --><title>div拖拽模板</title>
</head><body><div id="app"><el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible" v-drag><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-dialog></div>
</body>
<script>new Vue({el: '#app',data() {return {gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],dialogTableVisible: false,formLabelWidth: '120px',};},directives: {// 自定义指令 实现可拖动drag(el, bindings) {const dialogHeaderEl = el.querySelector('.el-dialog__header')const dragDom = el.querySelector('.el-dialog')// dialogHeaderEl.style.cursor = 'move';dialogHeaderEl.style.cssText += ';cursor:move;'dragDom.style.cssText += ';top:0px;'// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty = (function () {if (window.document.currentStyle) {return (dom, attr) => dom.currentStyle[attr]} else {return (dom, attr) => getComputedStyle(dom, false)[attr]}})()dialogHeaderEl.onmousedown = (e) => {// 鼠标按下，计算当前元素距离可视区的距离const disX = e.clientX - dialogHeaderEl.offsetLeftconst disY = e.clientY - dialogHeaderEl.offsetTopconst screenWidth = document.body.clientWidth // body当前宽度const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)const dragDomWidth = dragDom.offsetWidth // 对话框宽度const dragDomheight = dragDom.offsetHeight // 对话框高度const minDragDomLeft = dragDom.offsetLeftconst maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidthconst minDragDomTop = dragDom.offsetTopconst maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight// 获取到的值带px 正则匹配替换let styL = sty(dragDom, 'left')let styT = sty(dragDom, 'top')// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (styL.includes('%')) {styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)} else {styL = +styL.replace(/\px/g, '')styT = +styT.replace(/\px/g, '')}document.onmousemove = function (e) {// 通过事件委托，计算移动的距离let left = e.clientX - disXlet top = e.clientY - disY// 边界处理if (-(left) > minDragDomLeft) {left = -(minDragDomLeft)} else if (left > maxDragDomLeft) {left = maxDragDomLeft}if (-(top) > minDragDomTop) {top = -(minDragDomTop)} else if (top > maxDragDomTop) {top = maxDragDomTop}// 移动当前元素dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`}document.onmouseup = function (e) {document.onmousemove = nulldocument.onmouseup = null}}},},})
</script>
<style scoped></style></html>

【html弹框拖拽和div拖拽功能】原生html页面引入vue语法后通过自定义指令简单实现div和弹框拖拽功能

前言

另一个vue版本

效果图

div拖拽代码

弹框拖拽代码

相关文章：

【html弹框拖拽和div拖拽功能】原生html页面引入vue语法后通过自定义指令简单实现div和弹框拖拽功能

2023新华为OD机试题 - 计算网络信号（JavaScript） | 刷完必过

27.边缘系统的架构

机器学习强基计划8-1：图解主成分分析PCA算法(附Python实现)

Hudi-集成Spark之spark-shell 方式

Python爬虫:从js逆向了解西瓜视频的下载链接的生成

Numpy-如何对数组进行切割

Python之字符串精讲（下）

Python图像卡通化animegan2-pytorch实例演示

谢希仁版《计算机网络》期末总复习【完结】

问：React的useState和setState到底是同步还是异步呢？

深度理解机器学习16-门控循环单元

Python中Generators教程

数据结构与算法基础-学习-10-线性表之栈的清理、销毁、压栈、弹栈

Leetcode 每日一题 1234. 替换子串得到平衡字符串

【MYSQL中级篇】数据库数据查询学习

华为OD机试真题JAVA实现【火星文计算】真题+解题思路+代码（20222023）

Linux基础知识

Linux 游戏性能谁的更优秀X.Org还是Wayland！

【数据结构】算法的复杂度分析：让你拥有未卜先知的能力

web vue 项目 Docker化部署

进程地址空间（比特课总结）

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

SCAU期末笔记 - 数据分析与数据挖掘题库解析

测试markdown--肇兴

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

Python 训练营打卡 Day 47

SpringAI实战：ChatModel智能对话全解

五子棋测试用例