詳解如何在Vue2中實現(xiàn)useDraggable

更新時間：2023年12月06日 09:52:12 作者：何期驟雨降青霄

這篇文章主要為大家詳細介紹了Vue2中實現(xiàn)useDraggable的相關知識,文中的示例代碼簡潔易懂,對我們深入了解vue有一定的幫助,需要的小伙伴可以參考下

前言

最近接到個需求：要使 Modal 組件可以被拖拽。接到需求后立馬想到使用 mousedown mousemove mouseup 等事件及定位去實現(xiàn)，于是一頓操作后實現(xiàn)了一個 useMovable hook。但總覺得不夠完美，有以下問題：

被拖拽元素必須是定位元素，否則無法拖拽
有一個極難復現(xiàn)的bug，在開發(fā)環(huán)境甚至沒有復現(xiàn)過，生產環(huán)境也極少復現(xiàn)，因此一直未找到問題所在。

于是，就想到去看下一些開源組件庫是如何實現(xiàn)拖拽的，最終在 element-plus 中找到了（雖然 element-plus 是基于 Vue3 的，但在 Vue2.7 中同樣可以使用）；那么我們就來看看它的源碼。

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 可執(zhí)行拖動的元素
 */
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()
  })
}

可以看到，這里的拖拽是通過 transform 實現(xiàn)的，這就解決了之前提到過的元素必須是定位元素的問題。

同時為了保證元素拖拽時不被拖到視口之外，這里通過視口的寬高、元素的寬高、元素的位置等來計算出元素的 translate 的最大和最小值。

 // 保證在視口范圍內主要是以下代碼
const moveX = Math.min(
  Math.max(offsetX + e.clientX - downX, minLeft),
  maxLeft,
)
const moveY = Math.min(
  Math.max(offsetY + e.clientY - downY, minTop),
  maxTop,
)

另外，可以看到 useDraggable 接收了 targetRef dragRef 兩個參數(shù)，分別表示被拖拽的元素和可以執(zhí)行拖拽的元素，這樣可以將兩個元素區(qū)分開了（當然，是一個元素也完全沒有問題），便于實現(xiàn)如：在彈窗 header 部分按下鼠標可以拖拽整個彈窗，而在彈窗 body / footer 部分按下則無法進行拖拽的功能。

最后值得一提的是：draggable 參數(shù)的類型是 ComputedRef，這樣的好處就是可以監(jiān)聽 draggable 來動態(tài)的綁定和解綁拖拽函數(shù)。

當元素本身就具有 transform: translate 值時的處理方法

這樣似乎很完美，但測試過程中我發(fā)現(xiàn)一個問題：當被拖拽元素本身就具有 transform: translate 值就會出現(xiàn)bug；原因是 transform 變量在初次拖拽時兩個屬性的值都是 0，而在保證元素必須在視口中的計算代碼中使用到了 transform 變量，而當元素本身就具有 transform: translate 值時該計算就不再準確。

解決這個問題的方法就是拿到元素初始的 transform: translate 值賦給 transform 變量，于是我寫下了如下代碼：

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

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

然后一打印 cssTransform 發(fā)現(xiàn)是一個字符串，類似這樣: matrix(1, 0, 0, 1, 10, 10)，最后兩個數(shù)字代表 translateX 和 translateY 的值，但問題是如何取出來呢？

首先想到的是通過正則匹配取出再 parseFloat，但這樣顯然比較麻煩。于是我去搜索了一番，找到了 DOMMatrix，但它的兼容性較差，又經過一番搜索找到了 WebKitCSSMatrix，于是就有以下代碼：

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
  }
}

只要把這個函數(shù)放在 onMousedown 函數(shù)體最上面調用一下就解決了這個問題。

結語

當遇到問題時不妨多借鑒別人的代碼，尤其是第三方開源組件庫的源碼，也許你會有意想不到的收獲，思路一下子就打開了。但在借鑒別人代碼的同時你也得深入理解這段代碼，否則只是抄過來的話，需要新加需求時你可能就束手無策了。

到此這篇關于詳解如何在Vue2中實現(xiàn)useDraggable的文章就介紹到這了,更多相關Vue2實現(xiàn)useDraggable內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: