El dialog drag and drop, the boundary problem is completely corrected, and the bug of the online version is fixed

Preface ​

Welcome to my blog , Please give me some praise 、 Collection 、 Pay attention to the third company ！

Welcome to my knowledge base ,Java Start from scratch · Language sparrow

Your attention is my driving force ！

CSDN Blog entries focused on problem solving , YuQue focuses on collecting and summarizing knowledge , Including sharing cutting-edge technologies .

demand

Can drag and drop 、 The boundary problem .
​
Modify the point

reason

Look at the picture , This offsetHeight The margin is the distance of the box , But we counted the box in , Over calculate the height , Cause the pop-up box to run out of the page .

Basis of compilation js, named drag.js

export default {
    
  bind(el, binding, vnode) {
    
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cursor = 'move'
    dragDom.style.cssText += ';top:0px;'

    //  Get the original properties  ie dom Elements .currentStyle  Fox, Google  window.getComputedStyle(dom Elements , null);
    const getStyle = (function() {
    
      if (window.document.currentStyle) {
    
        return (dom, attr) => dom.currentStyle[attr]
      } else {
    
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()

    dialogHeaderEl.onmousedown = (e) => {
    
      //  The mouse click , Calculate the distance between the current element and the visible area 
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const screenWidth = document.body.clientWidth
      const screenHeight = document.body.clientHeight

      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop

      //  Get the value band px  Regular match replacement 
      let styL = getStyle(dragDom, 'left')
      let styT = getStyle(dragDom, 'top')

      if (styL.includes('%')) {
    
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
    
        styL = +styL.replace(/px/g, '')
        styT = +styT.replace(/px/g, '')
      }

      document.onmousemove = function(e) {
    
        //  Through event delegation , Calculate the distance of movement 
        let left = e.clientX - disX
        let top = e.clientY - disY

        //  Boundary treatment 
        if (-(left) > minDragDomLeft) {
    
          left = -minDragDomLeft
        } else if (left > maxDragDomLeft) {
    
          left = maxDragDomLeft
        }

        if (-(top) > minDragDomTop) {
    
          top = -minDragDomTop
        } else if (top > maxDragDomTop) {
    
          top = maxDragDomTop
        }

        //  Move the current element 
        dragDom.style.cssText += `;left:${
      left + styL}px;top:${
      top + styT}px;`
      }

      document.onmouseup = function(e) {
    
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
}

Edit directive file for outer layer use , named el-drag-dialog.js

import drag from './drag'

const install = function(Vue) {
    
  Vue.directive('el-drag-dialog', drag)
}

if (window.Vue) {
    
  window['el-drag-dialog'] = drag
  Vue.use(install); // eslint-disable-line
}

drag.install = install
export default drag

stay vue Used in components

<el-dialog v-el-drag-dialog></el-dialog>

import elDragDialog from '@/directive/el-drag-dialog'
directives: {
     elDragDialog },

Reference link ：https://blog.csdn.net/weixin_46074961/article/details/106905396