Vue3自定义指令实现鼠标拖拽、触摸拖拽弹窗

/**
 * @Description: 窗口拖拽
 * @Author boyzcf
 * @Date 2024-02-07 16:57
 * @E-mail boyzcf@qq.com
 */

/**
 *
 * @returns 移动端判断
 */
const isWap = () => {
  var userAgentInfo = navigator.userAgent
  var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod', 'Linux', 'Macintosh']
  var flag = true
  for (var v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false
      break
    }
  }

  // if (flag) {
  //   let width =
  //     document.documentElement.clientWidth || document.body.clientWidth
  //   if (width < 840) {
  //     //小于840px的屏幕，判定为手机
  //     flag = false
  //   }
  // }
  return !flag
}


function dgToEle(ele, target) {
  if (ele.className.split(' ').includes(target)) {
    return ele
  } else {
    return dgToEle(ele.parentNode, target)
  }
}
export default {
  mounted(el, binding, vnode) {
    // 如果传递了false就不启用指令，反之true undefined null 不传 则启动
    if (!binding.value && (binding.value ?? '') !== '') return
    let event = []
    if (isWap()) {
      event = ['ontouchstart', 'ontouchmove', 'ontouchend']
    } else {
      event = ['onmousedown', 'onmousemove', 'onmouseup']
    }
    // 拖拽实现
    const odiv = dgToEle(el, 'n-modal')
    el[event[0]] = (eve) => {
      odiv.style.zIndex = 1 //当前拖拽的在最前面显示
      eve = eve || window.event
      let mx, my
      if (isWap()) {
        mx = eve.touches[0].pageX
        my = eve.touches[0].pageY
      } else {
        mx = eve.pageX
        my = eve.pageY
      }
      const dleft = odiv.offsetLeft //窗口初始位置
      const dtop = odiv.offsetTop
      const clientWidth = document.documentElement.clientWidth //页面的宽
      const oWidth = odiv.clientWidth //窗口的宽
      const maxX = clientWidth - oWidth + oWidth / 2 // x轴能移动的最大距离
      const clientHeight = document.documentElement.clientHeight //页面的高
      const oHeight = odiv.clientHeight //窗口的高度
      const maxY = clientHeight - oHeight //y轴能移动的最大距离
      document[event[1]] = (e) => {
        e.preventDefault
        let x, y
        if (isWap()) {
          x = e.touches[0].pageX
          y = e.touches[0].pageY
        } else {
          x = e.pageX
          y = e.pageY
        }
        let left = x - mx + dleft //移动后的新位置
        let top = y - my + dtop //移动后的新位置
        if (left - oWidth / 2 < 0) left = oWidth / 2
        if (left > maxX) left = maxX
        if (top < 0) top = 0
        if (top > maxY) top = maxY
        odiv.style.left = left + 'px'
        odiv.style.top = top + 'px'

        odiv.style.marginLeft = 0
        odiv.style.marginTop = 0
      }
      document[event[2]] = () => {
        document[event[1]] = null
      }
    }
  }
}

到这里就结束了，后续还会更新 前端 系列相关，还请持续关注！ 感谢阅读，若有错误可以在下方评论区留言哦！！！