文档
官网文档：https://www.npmjs.com/package/v-drag
使用
安装、引入
npm install v-drag --save
import drag from "v-drag"
使用
直接使用：
<div v-drag>Drag me!</div>
注意：对原本绝对定位水平居中的div，其居中的实现方式应为：
div {
position: absolute;
left: 50%;
transform: translateX(-50%);
// 如果使用以下这种居中定位方式，拖动组件会有问题
// left: 0;
// right: 0;
// margin: 0 auto;
}
如果你需要拖拽的div中包含输入框、按钮等表单操作，对整个div进行drag是不可以的，这会使其中的输入操作失效。
插件提供了指定拖拽目标的选项，可以指定仅某个class的div可以被拖拽，使用方式形如：v-drag="'.xxx'"。
以下写法，拖动标题行，实现整个table-dialog的移动。
<div v-drag="'.table-title'" class="table-dialog">
<!-- 标题 -->
<div class="table-title">
</div>
<!-- 其他内容 -->
<div>...</div>
</div>
一点优化
我在一个通用的表格弹窗组件table-dialog中使用了v-drag指令，但发现存在一个bug：使用固定名称class指定拖拽对象，会导致多个共用此弹窗组件的自定义组件同时打开时，下方的组件拖拽失效。
解决方法：使用动态class。（api给出了ref的方式，但我简单试了下没成功，也可以从这个方向往下走）
<template>
<div v-drag="'.' + dynamicClassName" class="table-dialog">
<!-- 标题 -->
<div :class="['table-title', dynamicClassName]">
</div>
<!-- 其他内容 -->
<div>...</div>
</div>
</template>
<script setup>
const dynamicClassName = computed(() => {
// 类不能以数字开头，固定在前加一个字母
// randomUUID() 随便什么的随机字符串生成方法
return "d" + randomUUID();
});
</script>