【VueUse源码解析系列】useDraggable是如何实现元素拖拽

大家好，这是我开设第一个系列文章，旨在提升自己的源码阅读和调试能力、学习更多的优秀代码与逻辑。

如何调试

1. 克隆最新的 VueUse 仓库 git clone https://github.com/vueuse/vueuse.git
2. 安装依赖，因为依赖管理器配置的是 pnpm，所以使用 pnpm 来安装依赖 pnpm install
3. 启动项目 pnpm dev
4. 如果没有意外的话，就能在浏览器上看到运行在本地的官方文档页面
5. 在 /packages/core 文件夹下找到想要调试的目标方法，在 VSCode 和浏览器源代码中设置断点

接下来就可以开始愉快的调试了！

useDraggable

让元素变得可拖动，有两种使用方式：

• Hook - 源码位置 /useDraggable/index.ts
• Component - 源码位置/useDraggable/component.ts

Hook 方式

使用示例

通过useDraggable返回的style去改变元素样式来实现拖拽效果

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)

const { x, y, style } = useDraggable(el, {
  initialValue: { x: 80, y: 80 },
  preventDefault: true,
  exact: true,
})
</script>

<template>
  <div
    ref="el"
    :style="style"
  >