自定义指令-拖拽（学者说）

vue - 自定义指令 -拖拽

directives: {
    
    
  go: {
    
    
    inserted(el) {
    
    
      //给el设置绝对定位
      el.style.position = 'absolute'
      //给el添加鼠标按下的事件
      el.onmousedown = function (event) {
    
    
        //用视口的位置减去相对于父元素的位置得到一个距离差
        var sx = event.clientX - el.offsetLeft
        var sy = event.clientY - el.offsetTop
        //当鼠标按下移动的时候求出一个新的位置
        document.onmousemove = function (event) {
    
    
          //获取大盒子的宽度和高度
          var bigW = document.getElementById('box').offsetWidth
          var elW = el.offsetWidth
          var bigH = document.getElementById('box').offsetHeight
          var elH = el.offsetHeight
          var x = event.clientX - sx
          if (x > bigW - elW) {
    
    
            x = bigW - elW
          }
          if (x < 0) {
    
    
            x = 0
          }
          var y = event.clientY - sy
          if (y > bigH - elH) {
    
    
            y = bigH - elH
          }
          if (y < 0) {
    
    
            y = 0
          }
          //给el赋值
          el.style.left = x + 'px'
          el.style.top = y + 'px'
        }
        //当鼠标弹起的时候移除move事件
        el.onmouseup = function () {
    
    
          document.onmousemove = null
        }
      }
    },
  },
},
}