vue3自定义指令实现元素拖拽移动(自己练习)

  const vMove = {
    mounted(el){
      // console.log(el.getBoundingClientRect()) 获取元素位置
      // 记录(translate)移动的初始位置 
      let initPoints = {
        x:0,
        y:0
      }
      //鼠标开始的位置
      let start = {
        x:0,
        y:0
      }
      //鼠标移动结束的位置
      let end = {
        x:0,
        y:0
      }
      //鼠标移动的距离
      let move={
        x:0,
        y:0
      }
      el.onmousedown = (e)=>{

        // console.log('鼠标按下',e.target.nodeName)
        if(e.target.nodeName==='INPUT'){
          // 防止元素中有input无法点击
          return
        }
        start.x =e.clientX 
        start.y =e.clientY

        document.onmousemove = (event)=>{
          
          end.x = event.clientX
          end.y = event.clientY
          move.x = end.x - start.x + initPoints.x
          move.y = end.y - start.y + initPoints.y
          el.style.transform = `translate(${move.x}px,${move.y}px)`
          // 边界判断
          if(el.getBoundingClientRect().left<=0){
            move.x = -el.offsetLeft
            el.style.transform = `translate(${move.x}px,${move.y}px)`
          }
          if(el.getBoundingClientRect().right>=document.documentElement.clientWidth){
            move.x =document.documentElement.clientWidth - el.offsetLeft - el.getBoundingClientRect().width
            el.style.transform = `translate(${move.x}px,${move.y}px)`
          }
          if(el.getBoundingClientRect().top<=0){
            move.y = -el.offsetTop
            el.style.transform = `translate(${move.x}px,${move.y}px)`
          }
          if(el.getBoundingClientRect().bottom>=document.documentElement.clientHeight){
            move.y =document.documentElement.clientHeight - el.offsetTop - el.getBoundingClientRect().height
            el.style.transform = `translate(${move.x}px,${move.y}px)`
          }
          
          
          
        }
        document.onmouseup = (de) => {
          initPoints.x = move.x
          initPoints.y = move.y
          document.onmousemove = document.onmouseup = null
        }
        // return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
        return false
      }
      
      
    }
  }