vue3中用css transform实现组件自由拖拽

在Vue 3中，可以使用CSS transform 和 mousedown、mousemove、mouseup 事件来实现组件的自由拖拽。以下是一个简单的例子，展示如何使用这些技术来实现组件的自由拖拽。

1. 创建一个Vue 3组件

首先，创建一个Vue 3组件（例如，Draggable.vue），并添加模板、样式和脚本。

2. 解释

• 模板 (template): 组件的HTML结构是一个 div，并绑定了 @mousedown 事件来启动拖拽。style 是一个动态绑定的样式对象，用于更新位置。

• 脚本 (script):

  • ref 用于创建响应式变量。
  • startDrag 函数在鼠标按下时触发，记录初始位置并绑定 mousemove 和 mouseup 事件。
  • drag 函数在鼠标移动时触发，更新组件位置。
  • stopDrag 函数在鼠标松开时触发，解除事件绑定。

• 样式 (style): 为组件设置基本样式，使其可见并提供拖拽视觉效果。

3. 使用

可以在你的Vue 3应用中直接使用这个组件，像这样：

这个例子展示了如何使用CSS transform 和事件处理在Vue 3中实现一个简单的拖拽功能。