弹框问题修改

chenzeping

2021-04-12 6d31f5dbd15517c2aa1c1a0e1c5afb04290f7af0

 src/components/BaseNav/SolidWaste/directive/dir.js

@@ -1,59 +1,38 @@
import Vue from 'vue'

// 自定义元素实现弹框拖拽[重点]
Vue.directive('draw', {
  // inserted: function (el, binding, vNode) {
  //   el.setAttribute('style', 'position: fixed; z-index: 9999')
  // },
  bind: function (el, bindding, vNode) {
    el.setAttribute('draggable', true)
    let left, top, width, height
    el._dragstart = function (event) {
      event.stopPropagation()
      left = event.clientX - el.offsetLeft
      top = event.clientY - el.offsetTop
      width = el.offsetWidth
      height = el.offsetHeight
    }
    el._checkPosition = function () { // 防止被拖出边界
      const width = el.offsetWidth
      const height = el.offsetHeight
      let left = Math.min(el.offsetLeft, document.body.clientWidth - width)
      left = Math.max(0, left)
      let top = Math.min(el.offsetTop, document.body.clientHeight - height)
      top = Math.max(0, top)
      el.style.left = left + 'px'
      el.style.top = top + 'px'
      el.style.width = width + 'px'
      el.style.height = height + 'px'
    }
    el._dragEnd = function (event) {
      event.stopPropagation()
      left = event.clientX - left
      top = event.clientY - top
      el.style.left = left + 'px'
      el.style.top = top + 'px'
      el.style.width = width + 'px'
      el.style.height = height + 'px'
      el._checkPosition()
    }
    el._documentAllowDraop = function (event) {
      event.preventDefault()
    }
    document.body.addEventListener('dragover', el._documentAllowDraop)
    el.addEventListener('dragstart', el._dragstart)
    el.addEventListener('dragend', el._dragEnd)
    window.addEventListener('resize', el._checkPosition)
  },
const drag = Vue.directive('drag', {
  bind (el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.public-bounced-title')
    dialogHeaderEl.onmousedown = function (e) {
      var distX = e.pageX - el.offsetLeft
      var distY = e.pageY - el.offsetTop
      if (e.preventDefault) {
        e.preventDefault()
      } else {
        e.returnValue = false
      }
      document.onmousemove = function (e) {
        let left = e.clientX - distX
        let top = e.clientY - distY

  unbind: function (el, bindding, vNode) {
    document.body.removeEventListener('dragover', el._documentAllowDraop)
    el.removeEventListener('dragstart', el._dragstart)
    el.removeEventListener('dragend', el._dragEnd)
    window.removeEventListener('resize', el._checkPosition)
    delete el._documentAllowDraop
    delete el._dragstart
    delete el._dragEnd
    delete el._checkPosition
        if (left <= 0) {
          left = 5
        } else if (left > document.documentElement.clientWidth - dialogHeaderEl.clientWidth) {
          left = document.documentElement.clientWidth - dialogHeaderEl.clientWidth - 5
        }
        if (top <= 0) {
          top = 5
        } else if (top > document.documentElement.clientHeight - dialogHeaderEl.clientHeight) {
          top = document.documentElement.clientHeight - dialogHeaderEl.clientHeight - 5
        }

        el.style.left = left + 'px'
        el.style.top = top + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null
      }
    }
  }
})
export default drag