vue3 写一个drag的hook

最新推荐文章于 2024-09-28 23:29:59 发布

靠谱电竞

最新推荐文章于 2024-09-28 23:29:59 发布

阅读量108

点赞数

文章标签： vue.js javascript 前端 npm webpack

本文链接：https://blog.csdn.net/weixin_42612405/article/details/129618376

版权

该文章提供了一个在Vue3中使用自定义hook实现元素拖动功能的代码示例，主要涉及ref绑定变量、事件处理（dragStart,dragEnd,drag）以及组件生命周期钩子（onMounted,onUpdated,onUnmounted）的应用，用于管理拖动过程中的坐标和状态。

摘要由CSDN通过智能技术生成

好的，以下是如何在 Vue 3 中使用 hook 写一个 drag 的示例：

import { ref, onUnmounted, onMounted, onUpdated } from 'vue'

export default function useDrag() {
  const x = ref(0)
  const y = ref(0)
  let isDragging = false
  let currentX
  let currentY
  let initialX
  let initialY
  let xOffset = 0
  let yOffset = 0

  const dragStart = (e) => {
    initialX = e.clientX - xOffset
    initialY = e.clientY - yOffset

    if (e.target === e.currentTarget) {
      isDragging = true
      currentX = e.clientX
      currentY = e.clientY

      e.preventDefault()
    }
  }

  const dragEnd = (e) => {
    initialX = currentX
    initialY = currentY

    isDragging = false
  }

  const drag = (e) => {
    if (isDragging) {
      e.preventDefault()
      xOffset = e.clientX - initialX
      yOffset = e.clientY - initialY

      x.value = xOffset
      y.value = yOffset
    }
  }

  onMounted(() => {
    window.addEventListener('mousedown', dragStart)
    window.addEventListener('mouseup', dragEnd)
    window.addEventListener('mousemove', drag)
  })

  onUpdated(() => {
    if (!isDragging) {
      xOffset = 0
      yOffset = 0
    }
  })

  onUnmounted(() => {
    window.removeEventListener('mousedown', dragStart)
    window.removeEventListener('mouseup', dragEnd)
    window.removeEventListener('mousemove', drag)
  })

  return { x, y }
}