Vue3ts封装一个可任意拖拽的浮动气泡组件，允许 x 和 y 轴方向拖拽，吸附到 x 轴方向最近一边，可点击

最近项目中遇到一个需求：开发一个类似豆包（AI）的悬浮球功能。该悬浮球以浮动气泡的形式呈现，初始状态下默认位于屏幕右下角。用户可以通过拖拽操作，在屏幕的 x 轴（水平方向）和 y 轴（垂直方向）上自由移动悬浮球。当用户停止拖拽时，悬浮球会自动吸附到 x 轴方向上距离最近的屏幕边缘，确保其位置稳定且符合用户操作习惯。此外，悬浮球还具备可点击性，能够响应用户的点击

拖拽功能：通过监听 mousedown、mousemove 和 mouseup 事件实现拖拽功能。在 mousedown
时记录初始位置和鼠标位置，在 mousemove 时根据鼠标移动更新气泡位置，在 mouseup 或鼠标离开时结束拖拽并调用吸附逻辑。
吸附逻辑：在拖拽结束时，判断气泡与页面边缘的距离，如果小于阈值则吸附到最近的 x 轴方向的边缘。
isDragging 标志，点击事件触发时检查该标志，若为 true 则阻止点击事件。
增加了边界限制:限制气泡的顶部、底部和左右边界，确保气泡不会超出视口范围

拖拽组件：DragBall.vue
上代码
粘贴复制即可使用