春风项目四线(合箱线、总装线)
wujian
2024-01-24 78830ddf56a41d16ab440a1ed3019ef77b3db4af
提交 | 用户 | 时间
fd2207 1 /**
2 * v-dialogDrag 弹窗拖拽
3 * Copyright (c) 2019 jcdm
4 */
5
6 export default {
7   bind(el, binding, vnode, oldVnode) {
8     const value = binding.value
9     if (value == false) return
10     // 获取拖拽内容头部
11     const dialogHeaderEl = el.querySelector('.el-dialog__header');
12     const dragDom = el.querySelector('.el-dialog');
13     dialogHeaderEl.style.cursor = 'move';
14     // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
15     const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
16     dragDom.style.position = 'absolute';
17     dragDom.style.marginTop = 0;
18     let width = dragDom.style.width;
19     if (width.includes('%')) {
20       width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100);
21     } else {
22       width = +width.replace(/\px/g, '');
23     }
24     dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
25     // 鼠标按下事件
26     dialogHeaderEl.onmousedown = (e) => {
27       // 鼠标按下,计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
28       const disX = e.clientX - dialogHeaderEl.offsetLeft;
29       const disY = e.clientY - dialogHeaderEl.offsetTop;
30
31       // 获取到的值带px 正则匹配替换
32       let styL, styT;
33
34       // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
35       if (sty.left.includes('%')) {
36         styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
37         styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
38       } else {
39         styL = +sty.left.replace(/\px/g, '');
40         styT = +sty.top.replace(/\px/g, '');
41       };
42
43       // 鼠标拖拽事件
44       document.onmousemove = function (e) {
45         // 通过事件委托,计算移动的距离 (开始拖拽至结束拖拽的距离)
46         const l = e.clientX - disX;
47         const t = e.clientY - disY;
48
49         let finallyL = l + styL
50         let finallyT = t + styT
51
52         // 移动当前元素
53         dragDom.style.left = `${finallyL}px`;
54         dragDom.style.top = `${finallyT}px`;
55
56       };
57
58       document.onmouseup = function (e) {
59         document.onmousemove = null;
60         document.onmouseup = null;
61       };
62     }
63   }
64 };