Vue3 v-drag 拖拽指令的简单使用

文档

官网文档：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>