collar/src/directive/el-drag-dialog/drag2.js

export default {
  bind(el, binding,vNode,vNode1) {
    el.style.cursor = 'move'
    el.onmousedown = function(e) {
      //鼠标按下，计算当前元素距离可视区的距离
      let disx = e.pageX - el.offsetLeft
      let disy = e.pageY - el.offsetTop
      document.onselectstart = function(e) {
        return false;
      };//解决拖动会选中文字的问题
      document.onmousemove = function(e) {
        let x = e.pageX - disx
        let y = e.pageY - disy
        let maxX = document.getElementById("box").clientWidth - parseInt(window.getComputedStyle(el).width)
        let maxY = document.getElementById("box").clientHeight - parseInt(window.getComputedStyle(el).height)
        // console.log('maxX==>',maxX)
        // console.log('maxY==>',maxY)
        if (x < 0) {
          x = 0
        } else if (x > maxX) {
          x = maxX
        }

        if (y < 0) {
          y = 0
        } else if (y > maxY) {
          y = maxY
        }

        el.style.left = x + 'px'
        el.style.top = y + 'px'
        //将此时的位置传出去
        // binding.value({
        //   x: x + 'px',
        //   y: y + 'px'
        // })
      };
      document.onmouseup = function(e) {
          // console.log(e.target.innerHTML,'innerHTML===')

          
          let str = e.target.innerHTML;
          let result = el.getElementsByClassName('myspan')[0].innerText;
          let x = e.pageX - disx
          let y = e.pageY - disy
          let maxX = document.getElementById("box").clientWidth - parseInt(window.getComputedStyle(el).width)
          let maxY = document.getElementById("box").clientHeight - parseInt(window.getComputedStyle(el).height)
            // console.log('maxX==>',maxX)
            // console.log('maxY==>',maxY)
            if (x < 0) {
              x = 0
            } else if (x > maxX) {
              x = maxX
            }

            if (y < 0) {
              y = 0
            } else if (y > maxY) {
              y = maxY
            }

            el.style.left = x + 'px'
            el.style.top = y + 'px'
            //将此时的位置传出去
            binding.value({
              x: x + 'px',
              y: y + 'px',
              myId:result
            })
          document.onmousemove = null;
          document.onmouseup = null;
      };
    };
  }
}