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