[update] 增加弹框拖拽

2024-09-11 09:52:09 +08:00
parent dd3b766706
commit 2d59790957
10 changed files with 280 additions and 2 deletions
@@ -25,6 +25,7 @@
    "dom-align": "1.12.0",
    "echarts": "^5.4.2",
    "enquire.js": "^2.1.6",
+    "jquery": "^3.7.1",
    "js-base64": "^3.6.0",
    "js-cookie": "^2.2.0",
    "jsencrypt": "^3.0.0-rc.1",
@@ -1,5 +1,6 @@
 <template>
  <a-modal
+    v-dialog-drag
    ref="modal"
    :class="getClass(modalClass)"
    :style="getStyle(modalStyle)"
@@ -8,8 +9,9 @@
    v-on="$listeners"
    @ok="handleOk"
    @cancel="handleCancel"
-    destroyOnClose
  >
+<!--    关闭销毁会影响拖拽-->
+<!--    destroyOnClose-->

    <slot></slot>
    <!--有设置标题-->
@@ -134,6 +136,25 @@ export default {
    },
    innerFullscreen (val) {
      this.$emit('update:fullscreen', val)
+      if (val) {
+        // 全屏了
+        // 设置弹框在左上角
+        const dialogEl = document.getElementsByClassName('ant-modal')[0]
+        dialogEl.style.top = '0px'
+        dialogEl.style.left = '0px'
+        // 设置弹框头部不可拖拽
+        const dialogHeaderEl = document.getElementsByClassName('ant-modal-header')[0]
+        dialogHeaderEl.style.cursor = 'default'
+        dialogHeaderEl.style.pointerEvents = 'none'
+        // 设置取消全屏按钮可点击
+        const fullBtnEl = document.getElementsByClassName('right')[0]
+        fullBtnEl.style.pointerEvents = 'auto'
+      } else {
+        // 取消全屏，设置弹框头部可移动，鼠标事件恢复
+        const dialogHeaderEl = document.getElementsByClassName('ant-modal-header')[0]
+        dialogHeaderEl.style.cursor = 'move'
+        dialogHeaderEl.style.pointerEvents = 'auto'
+      }
    }
  },
  methods: {
@@ -1,5 +1,6 @@
 <template>
  <a-modal
+    v-dialog-drag
    title="用户列表"
    :width="1000"
    :visible="visible"
@@ -1,5 +1,5 @@
 <template>
-  <a-modal v-model="uploadVisible" :maskClosable="false" :footer="[]" :title="title" @cancel="handlePreImgCancel">
+  <a-modal v-dialog-drag v-model="uploadVisible" :maskClosable="false" :footer="[]" :title="title" @cancel="handlePreImgCancel">
    <a-upload-dragger
      :accept="accept"
      :disabled="disabled"
@@ -1,5 +1,6 @@
 <template>
  <a-modal
+    v-dialog-drag
    :title="title"
    :width="modalWidth"
    :visible="visible"
@@ -50,6 +50,9 @@ import JeroComponents from '@/components/jero/index'

 import JDictComponenets from '@comp/dict/index.js'

+// 引入自定义指令
+import '@/utils/directives'
+
 console.log('ant-design-vue version:', version)
 // Vue.prototype.rules = rules
 Vue.config.productionTip = false
@@ -0,0 +1,244 @@
+import Vue from 'vue'
+import $ from 'jquery'
+
+let binding
+// v-dialogDrag: 弹窗拖拽属性
+Vue.directive('dialogDrag', {
+  // , vnode, oldVnode
+  bind (el, bindingOne) {
+    binding = bindingOne
+    const dialogHeaderEl = el.querySelector('.ant-modal-header')
+    const dragDom = el.querySelector('.ant-modal')
+    // dialogHeaderEl.style.cursor = 'move';
+    dialogHeaderEl.style.cssText += ';cursor:move;'
+    // dragDom.style.cssText += ';top:200px;'
+
+    // 获取原有属性 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')
+
+      // const styLT = {styL:styL,styT:styT };
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (styL.includes('%')) {
+        // eslint-disable-next-line no-useless-escape
+        styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100)
+        // eslint-disable-next-line no-useless-escape
+        styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100)
+      } else {
+        styL = +styL.replace(/px/g, '')
+        styT = +styT.replace(/px/g, '')
+      }
+
+      document.ondblclick = () => {
+        dragDom.style.cssText += `;left:${0}%;top:${0}%;`
+      }
+
+      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 () {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+      return false
+    }
+  }
+})
+
+// import $ from './jq.js'
+//elementUI vue this.$confirm 弹出框移动
+$(function () {
+  $('body').on('mousedown', '.el-message-box__header', (e) => {
+    const dialogHeaderEl = document.querySelector('.el-message-box__header')
+    const dragDom = document.querySelector('.el-message-box')
+    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
+    dialogHeaderEl.style.cursor = 'move'
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+    // 鼠标按下，计算当前元素距离可视区的距离
+    const disX = e.clientX - dialogHeaderEl.offsetLeft
+    const disY = e.clientY - dialogHeaderEl.offsetTop
+    // 获取到的值带px 正则匹配替换
+    let styL, styT
+    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+    if (sty.left.includes('%')) {
+      styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
+      styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
+    } else {
+      let lefts = sty.left
+      let tops = sty.top
+      if (sty.left == 'auto') {
+        lefts = '0px'
+      }
+      if (sty.top == 'auto') {
+        tops = '0px'
+      }
+      styL = +lefts.replace(/px/g, '')
+      styT = +tops.replace(/px/g, '')
+    }
+
+    document.onmousemove = function (e) {
+      // 通过事件委托，计算移动的距离
+      let l = e.clientX - disX
+      let t = e.clientY - disY
+      // 边界处理
+      if (-l > minDragDomLeft) {
+        l = -minDragDomLeft
+      } else if (l > maxDragDomLeft) {
+        l = maxDragDomLeft
+      }
+      if (-t > minDragDomTop) {
+        t = -minDragDomTop
+      } else if (t > maxDragDomTop) {
+        t = maxDragDomTop
+      }
+
+      // 移动当前元素
+      dragDom.style.left = `${l + styL}px`
+      dragDom.style.top = `${t + styT}px`
+      dragDom.style.position = `absolute`
+
+      // 将此时的位置传出去
+      binding.value({ x: e.pageX, y: e.pageY })
+    }
+    document.ondblclick = () => {
+      dragDom.style.cssText += `;left:${45}%;top:${40}%;`
+    }
+
+
+    document.onmouseup = function () {
+      document.onmousemove = null
+      document.onmouseup = null
+    }
+
+  })
+})
+
+
+$(function () {
+  $('body').on('mousedown', '.search-box-header', (e) => {
+    const dialogHeaderEl = document.querySelector('.search-box-header')
+    const dragDom = document.querySelector('.sx-search-box')
+    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
+    dialogHeaderEl.style.cursor = 'move'
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
+    // 鼠标按下，计算当前元素距离可视区的距离
+    const disX = e.clientX - dialogHeaderEl.offsetLeft
+    const disY = e.clientY - dialogHeaderEl.offsetTop
+    // 获取到的值带px 正则匹配替换
+    let styL, styT
+    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+    if (sty.left.includes('%')) {
+      styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
+      styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
+    } else {
+      let lefts = sty.left
+      let tops = sty.top
+      if (sty.left == 'auto') {
+        lefts = '0px'
+      }
+      if (sty.top == 'auto') {
+        tops = '0px'
+      }
+      styL = +lefts.replace(/px/g, '')
+      styT = +tops.replace(/px/g, '')
+    }
+
+    document.onmousemove = function (e) {
+      // 通过事件委托，计算移动的距离
+      let l = e.clientX - disX
+      let t = e.clientY - disY
+      // 边界处理
+      if (-l > minDragDomLeft) {
+        l = -minDragDomLeft
+      } else if (l > maxDragDomLeft) {
+        l = maxDragDomLeft
+      }
+      if (-t > minDragDomTop) {
+        t = -minDragDomTop
+      } else if (t > maxDragDomTop) {
+        t = maxDragDomTop
+      }
+      // 移动当前元素
+      dragDom.style.left = `${l + styL}px`
+      dragDom.style.top = `${t + styT}px`
+      dragDom.style.position = `absolute`
+
+      // 将此时的位置传出去
+      binding.value({ x: e.pageX, y: e.pageY })
+    }
+    document.ondblclick = () => {
+      dragDom.style.cssText += `;left:${45}%;top:${40}%;`
+    }
+
+
+    document.onmouseup = function () {
+      document.onmousemove = null
+      document.onmouseup = null
+    }
+
+  })
+})
+
+
+
+
+
+
+
+
+
+
@@ -1,5 +1,6 @@
 <template>
  <a-modal
+    v-dialog-drag
    :title="title"
    :width="800"
    :visible="visible"
@@ -1,5 +1,6 @@
 <template>
  <a-modal
+    v-dialog-drag
    :title="title"
    :width="800"
    :visible="visible"
@@ -7458,6 +7458,11 @@ javascript-stringify@^1.6.0:
  resolved "https://registry.npmmirror.com/javascript-stringify/-/javascript-stringify-1.6.0.tgz#142d111f3a6e3dae8f4a9afd77d45855b5a9cce3"
  integrity sha512-fnjC0up+0SjEJtgmmG+teeel68kutkvzfctO/KxE3qJlbunkJYAshgH3boU++gSBHP8z5/r0ts0qRIrHf0RTQQ==

+jquery@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
+  integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
+
 js-base64@^2.1.9:
  version "2.6.4"
  resolved "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"