vue实现element-ui对话框可拖拽功能
element-ui对话框可拖拽及边界处理
应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案。很多大神给出的代码是没有解决边界问题的,但是不解决边界问题存在一个bug,拖到不可视区域后边再也拖不回来了,不信你们可以试试。
在实现的功能的情况下,封装成了js文件,然后再main.js中引入后可全局使用。
还是上代码吧
功能实现代码directives.js代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import Vue from 'vue' ; // v-dialogDrag: 弹窗拖拽属性 Vue.directive( 'dialogDrag' , { bind(el, binding, vnode, oldVnode) { 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.offsetLeft; const disY = e.clientY - dialogHeaderEl.offsetTop; const screenWidth = document.body.clientWidth; // body当前宽度 const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度,可某些环境下无法获取) const dragDomWidth = dragDom.offsetWidth; // 对话框宽度 const dragDomheight = dragDom.offsetHeight; // 对话框高度 const minDragDomLeft = dragDom.offsetLeft; const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; const minDragDomTop = dragDom.offsetTop; const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; // 获取到的值带px 正则匹配替换 let styL = sty(dragDom, 'left' ); let styT = sty(dragDom, 'top' ); // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px if (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 - disX; let 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 = null ; document.onmouseup = null ; }; } } }) |
在边界处理上,因为在我的项目中无法获取到body的高度(被这个折磨了好久),所以采取了获取可见区域高度,这里补充点知识
1
2
3
4
|
document.body.clientWidth //BODY对象宽度 document.body.clientHeight //BODY对象高度 document.documentElement.clientWidth //可见区域宽度 document.documentElement.clientHeight //可见区域高度 |
在main.js中引入
1
2
|
// 引入Dialog可拖拽,注意文件所在目录。目前尚未发现引入的先后关系,若有再补充 import './directives.js' ; |
ue文件中使用:
在el-dialog标签中加入v-dialogDrag属性
1
|
< el-dialog v-dialogDrag></ el-dialog > |
具体使用便是这样,希望有人看到哈哈哈,当然主要还是想帮到大家。
vue实现element-ui对话框可拖拽功能的更多相关文章
- 实现element-ui对话框可拖拽功能
element-ui对话框可拖拽及边界处理 应业务需求,需要实现对话框可拖拽问题,应element-ui没有提供官方支持,于是便参考大神的文章,得出了适合业务需要的解决方案.很多大神给出的代码是没有解 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- 为Bootstrap模态对话框添加拖拽移动功能
请自行下载使用到的Bootstrap库及jQuery库 <!DOCTYPE html> <html> <head lang="en"> < ...
- jQuery UI API - 可拖拽小部件(Draggable Widget)(转)
所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...
- JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...
- vue下使用echarts折线图及其横坐标拖拽功能
vue页面中使用折线图,并且有时间段筛选.因此就需要用到横坐标的拖拽功能. 界面效果如下: 现在来看这个效果的实现代码: drawLine() { let that = this, lineDate ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- vue2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
随机推荐
- 日常hive遇到的问题
1 hive中的复杂数据类型数据如何导入(array) 创建hive表 create table temp.dws_search_by_program_set_count_his( program_s ...
- Html CSS transform matrix3d 3D转场特效
Html CSS transform matrix3d 3D转场特效 透视矩阵 2n/(r-l) 0 (r+l)/(r-l) 0 0 2n/(t-b) (t+b)/(t-b) 0 0 0 (n+f)/ ...
- ajax跨域问题解决方案(jsonp的使用)
错误提示: 是由于在ajax中填写url: "http://10.176.220.60:8080/SSM/login" 包含IP地址,系统默认跨域导致: 解决方法:在ajax当中d ...
- 使用git下载和引进项目流程
1.下载地址https://git-scm.com/download/win 2.idea中加入git插件 Git插件引入 3.复制github中项目地址在idea中打开 4.使用git ...
- MySQL数据库语法-单表查询练习
MySQL数据库语法-单表查询练习 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客主要是对聚合函数和分组的练习. 一.数据表和测试数据准备 /* @author :yinz ...
- 永远不会执行的cron表达式
场景是这样的,在服务里利用sprint boot的@Scheduled(cron = "${xx.run.schedule}")定义了一个定时服务,xx.run.schedule变 ...
- python中json序列化时汉字变成编码的解决方式
我们在使用json模块时,如果被序列化对象中不包含汉字,当然没有任何问题,但是有汉字会被编译成unicode码: import json dic = {","sex":& ...
- React 零碎笔记
1.对数组的操作(添加.更新.删除) const posts = [...this.state.posts]; posts.push(post); this.setState({posts}); =& ...
- P2P system: Introduction
P2P system : peer-to-peer system 一些流行的P2P system: Napster, Gnutella 我们为什么研究P2P system 大型的分布式系统有成千上万个 ...
- redis 介绍与操作
参考连接: https://www.cnblogs.com/wupeiqi/articles/5132791.html redis 是什么? redis是一个软件,帮助开发者对一台机器的内存进行操作 ...