移动端,PC拖拽功能

移动端拖拽

/**
 * @description 拖动
 * @params {targetEl} 要拖动的元素
 * @params {parentEl} 拖动元素的父元素
 * @params {rangConfig} 可以拖动的边界范围
 * @params {config} 上下拖动 / 左右拖动
 *  */
​
interface RangConfig {
    paddingL:number
    paddingR:number
    paddingT:number
    paddingB:number
}
interface Config {
  dragX:boolean
  dragY:boolean
}
​
interface RangConfig {
  paddingL: number
  paddingR: number
  paddingT: number
  paddingB: number
}
interface Config {
  dragX: boolean
  dragY: boolean
}

/**
 * @description 手机端拖动
 * @params {targetEl} 要拖动的元素
 * @params {parentEl} 拖动元素的父元素
 * @params {rangConfig} 可以拖动的边界范围
 * @params {config} 上下拖动 / 左右拖动
 *  */
export const dragFun = (targetEl: HTMLElement, rangConfig?: RangConfig, parentEl?: HTMLElement, config: Config = { dragX: true, dragY: true }) => {
  if (process.client) {
    if (!parentEl) {
      parentEl = document.documentElement
    }
    if (!rangConfig) {
      rangConfig = {
        paddingL: 10,
        paddingR: 10,
        paddingT: 10,
        paddingB: 10
      }
    }

    targetEl.addEventListener(
      'touchstart',
      function (e) {
        e.stopPropagation()
        const parentWidth = parentEl?.clientWidth as number
        const parentHeight = parentEl?.clientHeight as number
        const _offsetLeft = targetEl.offsetLeft
        const _offsetTop = targetEl.offsetTop
        const targetWidth = targetEl.clientWidth
        const targetHeight = targetEl.clientHeight
        const rangL = rangConfig?.paddingL as number
        const rangR = rangConfig?.paddingR as number
        const rangT = rangConfig?.paddingT as number
        const rangB = rangConfig?.paddingB as number
        /* 元素初始的位置 */
        const mouseTop = e.changedTouches[0].pageY
        const mouseLeft = e.changedTouches[0].pageX
        targetEl.ontouchmove = function (e) {
          e.preventDefault()
          let targtLeft = _offsetLeft + e.changedTouches[0].pageX - mouseLeft
          let targtTop = _offsetTop + e.changedTouches[0].pageY - mouseTop
          if (parentWidth - rangR - targetWidth <= targtLeft) {
            targtLeft = parentWidth - rangR - targetWidth
          }
          if (parentHeight - rangB - targetHeight <= targtTop) {
            targtTop = parentHeight - rangB - targetHeight
          }
          if (targtTop < rangT) {
            targtTop = rangT
          }
          if (targtLeft < rangL) {
            targtLeft = rangL
          }
          // 左右拖动
          if (config.dragX) {
            targetEl.style.left = targtLeft + 'px'
          }
          // 上下拖动
          if (config.dragY) {
            targetEl.style.top = targtTop + 'px'
          }
        }
      },
      { passive: false }
    )
  }
}
​

pc端拖拽

/**
 * @description 拖动
 * @params {targetEl} 要拖动的元素
 * @params {parentEl} 拖动元素的父元素
 * @params {rangConfig} 可以拖动的边界范围
 * @params {config} 上下拖动 / 左右拖动
 *  */
​
interface RangConfig {
  paddingL: number
  paddingR: number
  paddingT: number
  paddingB: number
}
interface Config {
  dragX: boolean
  dragY: boolean
}
​
export const dragFun = (targetEl: HTMLElement, rangConfig?: RangConfig, parentEl?: HTMLElement, config: Config = { dragX: true, dragY: true }) => {
  if (process.client) {
    if (!parentEl) {
      parentEl = document.documentElement
    }
    if (!rangConfig) {
      rangConfig = {
        paddingL: 10,
        paddingR: 10,
        paddingT: 10,
        paddingB: 10
      }
    }
​
    const parentClearMove = () => {
      parentEl.onmousemove = null
      parentEl.removeEventListener('mouseup', parentClearMove)
      parentEl.removeEventListener('mouseleave', parentClearMove)
    }
​
    const mousedownFun = (e) => {
      e.stopPropagation()
      parentEl.addEventListener('mouseup', parentClearMove)
      parentEl.addEventListener('mouseleave', parentClearMove)
      const parentWidth = parentEl?.clientWidth as number
      const parentHeight = parentEl?.clientHeight as number
      const _offsetLeft = targetEl.offsetLeft
      const _offsetTop = targetEl.offsetTop
      const targetWidth = targetEl.offsetWidth
      const targetHeight = targetEl.offsetHeight
      const rangL = rangConfig?.paddingL as number
      const rangR = rangConfig?.paddingR as number
      const rangT = rangConfig?.paddingT as number
      const rangB = rangConfig?.paddingB as number
      /* 元素初始的位置 */
      const mouseTop = e.pageY
      const mouseLeft = e.pageX
      parentEl.onmousemove = function (e) {
        let targtLeft = _offsetLeft + e.pageX - mouseLeft
        let targtTop = _offsetTop + e.pageY - mouseTop
        if (parentWidth - rangR - targetWidth <= targtLeft) {
          targtLeft = parentWidth - rangR - targetWidth
        }
        if (parentHeight - rangB - targetHeight <= targtTop) {
          targtTop = parentHeight - rangB - targetHeight
        }
        if (targtTop < rangT) {
          targtTop = rangT
        }
        if (targtLeft < rangL) {
          targtLeft = rangL
        }
        // 左右拖动
        if (config.dragX) {
          targetEl.style.left = targtLeft + 'px'
        }
        // 上下拖动
        if (config.dragY) {
          targetEl.style.top = targtTop + 'px'
        }
      }
    }
​
    targetEl.addEventListener(
      'mousedown',
      mousedownFun
    )
  }
}
​