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 >

具体使用便是这样,希望有人看到哈哈哈,当然主要还是想帮到大家。


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

vue draggable 火狐拖拽搜索问题知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。