dragModal.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import Vue from 'vue'
  2. // 弹窗拖拽属性
  3. /**
  4. * @directive 自定义属性
  5. * @todo 弹窗拖拽属性
  6. * @desc 使用在弹窗内部任意加载的html添加v-drag
  7. * @param .ant-modal-header 弹窗头部用来拖动的属性
  8. * @param .ant-modal 拖动的属性
  9. */
  10. const dragModal = Vue.directive('drag', (el, binding, vnode, oldVnode) => {
  11. // inserted (el, binding, vnode, oldVnode) {
  12. Vue.nextTick(() => {
  13. const isThemeModal = el.classList.contains('grid-theme')
  14. const dialogHeaderEl = isThemeModal ? el.querySelector('.ant-tabs-bar') : el.querySelector('.ant-modal-header')
  15. const dragDom = isThemeModal ? el.querySelector('.ant-modal') : el.querySelector('.ant-modal')
  16. if(dialogHeaderEl){
  17. // dialogHeaderEl.style.cursor = 'move';
  18. dialogHeaderEl.style.cssText += ';cursor:move;user-select:none;'
  19. // dragDom.style.cssText += ';top:0px;'
  20. dragDom.style.cssText += `;left:0px;top:0px;`
  21. // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
  22. const sty = (function () {
  23. if (window.document.currentStyle) {
  24. return (dom, attr) => dom.currentStyle[attr]
  25. } else {
  26. return (dom, attr) => getComputedStyle(dom, false)[attr]
  27. }
  28. })()
  29. dialogHeaderEl.onmousedown = (e) => {
  30. // 鼠标按下,计算当前元素距离可视区的距离
  31. const disX = e.clientX - dialogHeaderEl.offsetLeft
  32. const disY = e.clientY - dialogHeaderEl.offsetTop
  33. const screenWidth = document.body.clientWidth // body当前宽度
  34. const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度,可某些环境下无法获取)
  35. const dragDomWidth = dragDom.offsetWidth // 对话框宽度
  36. const dragDomheight = dragDom.offsetHeight // 对话框高度
  37. const minDragDomLeft = dragDom.offsetLeft
  38. const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth - (isThemeModal ? 10 : 0)
  39. const minDragDomTop = dragDom.offsetTop
  40. const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight - (isThemeModal ? 10 : 0)
  41. // 获取到的值带px 正则匹配替换
  42. let styL = sty(dragDom, 'left')
  43. let styT = sty(dragDom, 'top')
  44. // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
  45. if (styL.includes('%')) {
  46. // eslint-disable-next-line no-useless-escape
  47. styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
  48. // eslint-disable-next-line no-useless-escape
  49. styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
  50. } else {
  51. styL = +styL.replace(/\px/g, '')
  52. styT = +styT.replace(/\px/g, '')
  53. };
  54. document.onmousemove = function (e) {
  55. // 通过事件委托,计算移动的距离
  56. let left = e.clientX - disX
  57. let top = e.clientY - disY
  58. // 边界处理
  59. if (-(left) > minDragDomLeft) {
  60. left = -(minDragDomLeft)
  61. } else if (left > maxDragDomLeft) {
  62. left = maxDragDomLeft
  63. }
  64. if (-(top) > minDragDomTop) {
  65. top = -(minDragDomTop)
  66. } else if (top > maxDragDomTop) {
  67. top = maxDragDomTop
  68. }
  69. // 移动当前元素
  70. dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
  71. }
  72. document.onmouseup = function (e) {
  73. document.onmousemove = null
  74. document.onmouseup = null
  75. dragDom.releaseCapture && dragDom.releaseCapture();
  76. }
  77. dragDom.setCapture && dragDom.setCapture();
  78. }
  79. }
  80. })
  81. })
  82. export default dragModal