详解如何在Vue2中实现useDraggable

import { onBeforeUnmount, onMounted, watchEffect } from 'vue'
import type { ComputedRef, Ref } from 'vue'

function toCssValue (val?: number | string | null): string {
  if (val == null) return ''
  if (typeof val === 'number') return `${val}px`
  return val
}

/**
 * 使目标元素可以被拖动的 hook
 * @param targetRef 目标元素，即被拖动的元素
 * @param dragRef 可执行拖动的元素
 */
export function useDraggable (
  targetRef: Ref<HTMLElement | null | undefined>,
  dragRef: Ref<HTMLElement | null | undefined>,
  draggable: ComputedRef<boolean>,
) {
  let transform = {
    offsetX: 0,
    offsetY: 0,
  }

  const onMousedown = (e: MouseEvent) => {
    const downX = e.clientX
    const downY = e.clientY
    const { offsetX, offsetY } = transform

    const targetRect = targetRef.value!.getBoundingClientRect()
    const targetLeft = targetRect.left
    const targetTop = targetRect.top
    const targetWidth = targetRect.width
    const targetHeight = targetRect.height

    const clientWidth = document.documentElement.clientWidth
    const clientHeight = document.documentElement.clientHeight

    const minLeft = -targetLeft + offsetX // translateX 最小值
    const minTop = -targetTop + offsetY // translateY 最小值
    const maxLeft = clientWidth - targetLeft - targetWidth + offsetX // translateX 最大值
    const maxTop = clientHeight - targetTop - targetHeight + offsetY // translateY 最大值

    const onMousemove = (e: MouseEvent) => {
      // 获取移动偏移量，同时保证在视口范围内
      const moveX = Math.min(
        Math.max(offsetX + e.clientX - downX, minLeft),
        maxLeft,
      )
      const moveY = Math.min(
        Math.max(offsetY + e.clientY - downY, minTop),
        maxTop,
      )

      transform = {
        offsetX: moveX,
        offsetY: moveY,
      }
      // 源码中使用了 addUnit，这里我做了点小改动
      targetRef.value!.style.transform = `translate(${toCssValue(moveX)}, ${toCssValue(moveY)})`
    }

    const onMouseup = () => {
      document.removeEventListener('mousemove', onMousemove)
      document.removeEventListener('mouseup', onMouseup)
    }

    document.addEventListener('mousemove', onMousemove)
    document.addEventListener('mouseup', onMouseup)
  }

  const onDraggable = () => {
    if (dragRef.value && targetRef.value) {
      dragRef.value.addEventListener('mousedown', onMousedown)
    }
  }

  const offDraggable = () => {
    if (dragRef.value && targetRef.value) {
      dragRef.value.removeEventListener('mousedown', onMousedown)
    }
  }

  onMounted(() => {
    watchEffect(() => {
      if (draggable.value) {
        onDraggable()
      } else {
        offDraggable()
      }
    })
  })

  onBeforeUnmount(() => {
    offDraggable()
  })
}

 // 保证在视口范围内主要是以下代码
const moveX = Math.min(
  Math.max(offsetX + e.clientX - downX, minLeft),
  maxLeft,
)
const moveY = Math.min(
  Math.max(offsetY + e.clientY - downY, minTop),
  maxTop,
)

function getComputedStylePropertyValue (
  el: Element,
  property: string,
): string {
  const css = window.getComputedStyle(el, null)
  return css.getPropertyValue(property)
}

const cssTransform = getComputedStylePropertyValue(targetRef.value!, 'transform')

const setTransformInitialValue = () => {
  const Matrix = DOMMatrix || WebKitCSSMatrix
  const cssTransform = getComputedStylePropertyValue(targetRef.value!, 'transform')
  const matrix = new Matrix(cssTransform)

  transform = {
    offsetX: matrix.e || 0, // matrix.e 代表 translateX
    offsetY: matrix.f || 0, // matrix.f 代表 translateY
  }
}