v-drag 弹框拖拽的实现

directives: {
    drag: {      
      mounted: function (el) {                     
        el.onmousedown = function(e1) {           
          let disx = e1.pageX - el.parentElement.offsetLeft;
          let disy = e1.pageY - el.parentElement.offsetTop;
          e1.stopPropagation();
          document.onmousemove = function (e) {
            let dx = e.pageX - disx
            let dy = e.pageY - disy
            // console.log(dx,dy,'before')
            // width: 644px;
            // height: 486px;
            // window.innerHeight: 937
            // window.innerWidth: 1920
　　　　　　　//  拖拽范围根据实际情况去写
            if(dx < 0){
              dx = 0
            }
            if(dx > window.innerWidth - 644 - 52){
              dx = window.innerWidth - 644 - 52
            }
            if(dy > window.innerHeight - 486 - 52){
              dy = window.innerHeight - 486 - 52
            }
            if(dy < 0){
              dy = 0
            }
            // console.log(dx,dy,'after')
            el.parentElement.style.left = `${dx}px`;
            el.parentElement.style.top = `${dy}px`;
            e.stopPropagation();
          };
          document.onmouseup = function(e) {
            // eslint-disable-next-line no-multi-assign
            document.onmousemove = document.onmouseup = null;
            e.stopPropagation();
          };
        } 
      }
    }
  }

标签：el,parentElement,window,弹框,drag,dx,dy,document,拖拽
来源： https://www.cnblogs.com/daifuchao/p/15084566.html