简单实现el-dialog的拖拽功能

首先还是要明确几个概念，这里通过修改css并截图给大家介绍下，理解了这几个概念，代码写起来会得心应手许多。

clientWidth，clientHeight
scrollWidth，scrollHeight
offsetWidth，offsetHeight
clientLeft，clientTop
scrollLeft，scrollTop
offsetLeft，offsetTop

1. clientWidth，clientHeight

clientWidth，clientHeight表示对象内容的可视区的宽度，不包括滚动条和边框，会随对象显示大小的变化而改变。

上图中，我给el-scrollbar__view这个div增加了10px的红色边框，整个div的实际高度，宽度变成了3452px，1920px，观察clientWidth，clientHeight的值是3432px，1900px，并没有包含边框和滚动条的宽度。

2. scrollWidth，scrollHeight

scrollWidth，scrollHeight表示对象的实际内容的宽度，不包括边框（但是包括滚动条），会随对象中内容超过可视区后而变大。

上图中，我还是给el-scrollbar__view这个div增加了10px的红色边框，整个div的实际高度，宽度变成了3452px，1920px，观察scrollWidth，scrollHeight的值是3432px，1900px，并没有包含边框的宽度。

3. offsetWidth，offsetHeight

offsetWidth，offsetHeight表示对象整体的实际宽度，包括滚动条和边框，会随对象显示大小的变化而改变。

上图中，我还是给el-scrollbar__view这个div增加了10px的红色边框，整个div的实际高度，宽度变成了3452px，1920px，观察scrollWidth，scrollHeight的值仍然是3452px，1920px，包含滚动条和边框。

4. clientLeft，clientTop

clientLeft，clientTop表示对象边框的宽度。

上图中，我还是给el-scrollbar__view这个div增加了10px的红色边框，观察clientLeft， clientTop均为10px。

5. scrollLeft，scrollTop

scrollLeft,scrollTop表示对象的显示（可见）的内容与该对象实际的内容的距离。

上图中，我们给content这个section设置了宽高均是300px，并设置显示滚动条，将滚动条拖动一部分，观察scrollLeft，scrollTop的值分别是164px，204px，这对应着当前内容距离原来实际内容的距离（假设蓝色框是实际内容的距离）。

6. offsetLeft，offsetTop

offsetLeft，offsetTop表示对象边框的外边缘距离与已定位的父容器（offsetparent）的内边距离（不包括元素的边框和父容器的边框）。

上图中，el-dialog这个div距离已定位的父容器（这里是el-dialog__wrapper）的宽高分别是672px，61px，与offsetLeft，offsetTop值一致。

我们给el-dialog__wrapper加上一个20px的黄色边框，给el-dialog加上一个10px的蓝色边框，再来观察offsetLeft，offsetTop的值，发现在计算时，是从黄色边框的内边距到蓝色边框的外边距，不包括边框。

7. coding

明确上述概念之后，我们来着手写代码，先说下我的业务场景。

有一个dialog弹框，弹框的背景并不是全屏的，只在除header，sidebar的地方显示，要求拖拽dialog弹框不能超过背景。

我们在main.js同级目录创建directives.js，具体代码如下

 1 import Vue from 'vue';

 2

 3 // v-dialogDrag 弹窗拖拽

 4 Vue.directive('dialogDrag', {

 5     bind(el, binding, vnode, oldVnode) {

 6         const dialogHeaderEl = el.querySelector('.el-dialog__header');

 7         const dragDom = el.querySelector('.el-dialog');

 8         dialogHeaderEl.style.cursor = 'move';

 9         // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);

10         const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);

11         dialogHeaderEl.onmousedown = (e) => {

12             console.log('屏幕高度', document.documentElement.clientHeight);

13             console.log('弹窗高度', dragDom.offsetHeight);

14             // 鼠标按下，获取鼠标在盒子内的坐标

15             const disX = e.clientX - dialogHeaderEl.offsetLeft;

16             const disY = e.clientY - dialogHeaderEl.offsetTop;

17             // 获取到的值带px 正则匹配替换

18             let styL;

19             let styT;

20             // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px

21             if (sty.left.includes('%')) {

22                 styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);

23                 styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);

24             } else {

25                 styL = +sty.left.replace(/\px/g, '');

26                 styT = +sty.top.replace(/\px/g, '');

27             }

28             // 鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标就是模态框的left和top值

29             document.onmousemove = function(e) {

30                 // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）

31                 const l = e.clientX - disX;

32                 const t = e.clientY - disY;

33

34                 let finallyL = l + styL;

35                 let finallyT = t + styT;

36

37                 // 边界值判定 注意clientWidth scrollWidth区别 要减去之前的top left值

38                 let limitL = (document.documentElement.clientWidth - dragDom.clientWidth) / 2;

39                 if (finallyL < -limitL) {

40                     finallyL = -limitL;

41                 } else if (finallyL > limitL) {

42                     finallyL = limitL;

43                 }

44                 let limitT = document.documentElement.clientHeight * 15 / 100;

45                 let limitB = document.documentElement.clientHeight - dragDom.clientHeight - limitT;

46                 if (finallyT < -limitT) {

47                     finallyT = -limitT;

48                 } else if (finallyT > limitB) {

49                     finallyT = limitB;

50                 }

51                 // 移动当前元素

52                 dragDom.style.left = `${finallyL}px`;

53                 dragDom.style.top = `${finallyT}px`;

54             };

55             document.onmouseup = function(e) {

56                 document.onmousemove = null;

57                 document.onmouseup = null;

58             };

59         };

60     }

61 });

参考网址：https://www.jianshu.com/p/c3ce06c423af?tdsourcetag=s_pctim_aiomsg