vue3实现元素拖拽移动功能

一、效果如下：

二、思路和步骤：

整体思路是在鼠标按下时计算初始偏移值，并在拖拽过程中更新 div 元素的位置，通过事件监听器实现拖拽效果。

（1）用户点击触发拖拽：

当用户点击可拖拽的 div 元素时，通过 mousedown 事件触发 startDrag 函数。

（2）初始化变量：

startDrag 函数初始化一些变量，包括水平和垂直方向上的偏移值，以及拖拽状态。

（3）引入倍率调整偏移值：

在鼠标按下瞬间，通过计算初始偏移值时引入了一个倍率 offsetMultiplier，用于调整 div 与鼠标的距离。通过调整这个常量，可以控制 div 距离鼠标的远近。

（4）添加事件监听器：

函数添加移动事件和鼠标松开事件的监听器，以便在拖拽过程中实时更新 div 的位置。

（5）移动事件处理：

在移动事件处理函数 moveHandler 中，计算新的位置，并在检查新位置是否在视口内后，更新 div 元素的 left 和 top 样式，实现拖拽效果。

（6）边界检查：

为了确保拖拽过程中不会超出视口范围，进行了边界检查。

（7）鼠标松开处理：

鼠标松开事件处理函数 upHandler 主要用于在鼠标松开时停止拖拽，将拖拽状态重置，并移除事件监听器。

（8）模板中绑定事件：

在模板中绑定 mousedown 事件，实现了在点击 div 元素时触发拖拽效果。

（9）样式定义：

在样式中，定义了 div 的基本样式，包括绝对定位、鼠标样式等。

三、源码如下：