Newer
Older
KaiFengPC / src / directive / el-drag-dialog / index.js
@zhangdeliang zhangdeliang on 23 May 2 KB 初始化项目
  1. // v-dialogDrag: 弹窗拖拽属性
  2.  
  3. export default {
  4. // 指令的定义
  5. mounted(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. dialogHeaderEl.style.cssText += ";cursor:move;";
  10. dragDom.style.cssText += ";top:0px;";
  11.  
  12. // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  13. const sty = (function () {
  14. if (window.document.currentStyle) {
  15. return (dom, attr) => dom.currentStyle[attr];
  16. } else {
  17. return (dom, attr) => getComputedStyle(dom, false)[attr];
  18. }
  19. })();
  20.  
  21. dialogHeaderEl.onmousedown = (e) => {
  22. // 鼠标按下,计算当前元素距离可视区的距离
  23. const disX = e.clientX - dialogHeaderEl.offsetLeft;
  24. const disY = e.clientY - dialogHeaderEl.offsetTop;
  25.  
  26. const screenWidth = document.body.clientWidth; // body当前宽度
  27. const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度,可某些环境下无法获取)
  28.  
  29. const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
  30. const dragDomheight = dragDom.offsetHeight; // 对话框高度
  31.  
  32. const minDragDomLeft = dragDom.offsetLeft;
  33. const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
  34.  
  35. const minDragDomTop = dragDom.offsetTop;
  36. const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
  37.  
  38. // 获取到的值带px 正则匹配替换
  39. let styL = sty(dragDom, "left");
  40. let styT = sty(dragDom, "top");
  41.  
  42. // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
  43. if (styL.includes("%")) {
  44. styL = +document.body.clientWidth * (+styL.replace(/\%/g, "") / 100);
  45. styT = +document.body.clientHeight * (+styT.replace(/\%/g, "") / 100);
  46. } else {
  47. styL = +styL.replace(/\px/g, "");
  48. styT = +styT.replace(/\px/g, "");
  49. }
  50.  
  51. document.onmousemove = function (e) {
  52. // 通过事件委托,计算移动的距离
  53. let left = e.clientX - disX;
  54. let top = e.clientY - disY;
  55.  
  56. // 边界处理
  57. if (-left > minDragDomLeft) {
  58. left = -minDragDomLeft;
  59. } else if (left > maxDragDomLeft) {
  60. left = maxDragDomLeft;
  61. }
  62.  
  63. if (-top > minDragDomTop) {
  64. top = -minDragDomTop;
  65. } else if (top > maxDragDomTop) {
  66. top = maxDragDomTop;
  67. }
  68.  
  69. // 移动当前元素
  70. dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
  71. };
  72.  
  73. document.onmouseup = function (e) {
  74. document.onmousemove = null;
  75. document.onmouseup = null;
  76. };
  77. };
  78. },
  79. };