在Vue 3中，可以使用CSS transform 和 mousedown、mousemove、mouseup 事件来实现组件的自由拖拽。以下是一个简单的例子，展示如何使用这些技术来实现组件的自由拖拽。
- 创建一个Vue 3组件
首先，创建一个Vue 3组件（例如，Draggable.vue），并添加模板、样式和脚本。
Drag Me
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
- 解释
模板 (template): 组件的HTML结构是一个 div，并绑定了 @mousedown 事件来启动拖拽。style 是一个动态绑定的样式对象，用于更新位置。
脚本 (script):
ref 用于创建响应式变量。
startDrag 函数在鼠标按下时触发，记录初始位置并绑定 mousemove 和 mouseup 事件。
drag 函数在鼠标移动时触发，更新组件位置。
stopDrag 函数在鼠标松开时触发，解除事件绑定。
样式 (style): 为组件设置基本样式，使其可见并提供拖拽视觉效果。
- 使用
可以在你的Vue 3应用中直接使用这个组件，像这样：
这个例子展示了如何使用CSS transform 和事件处理在Vue 3中实现一个简单的拖拽功能。
