vue 悬浮图标_vue实现可拖拽移动悬浮球

拖拽移动悬浮球

需求拆解

1.元素悬浮于全屏

2.元素可拖拽

3.元素拖拽结束后会吸附贴壁

4.元素单击唤出菜单

5.菜单展开时点击空白处关闭菜单

6.菜单不可拖拽

7.元素拖拽时菜单不打开

8.元素拖拽至接近底部时，若剩余高度不足以展开菜单则自动吸附至底部。

实现思路

如果适配移动端，则需加注touch事件

1.鼠标按下时

1.1.如果此时已打开菜单，则不做响应

1.2.未打开菜单，记录 按下状态为true 记录x y轴坐标

2.按下移动时 动态计算坐标 设置拖拽元素 style 控制位置 ;

2.1.判断拖拽区域 溢出时 归位判断；

2.2.拖拽时 阻止页面滑动

2.3.增加拖拽计数

3.鼠标抬起

3.1.修改 按下状态 为false

3.2.根据元素位置和容器高宽动态计算元素最后应该吸附位置

4.元素点击事件

4.1.拖拽计数与历史计数差小于10则执行点击事件

4.2.反之不执行

实现过程

:class="{'zlevelTop':mouseDownState}"

style="position: absolute;top: 0;height: 100%;width: 100%">

style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 998">

ref="actionMgr" :style="position" @mousedown="demo_down">

export default {

name: "homeDragbtn",

props: {

// 通过position来设置初始定位

position: {

type: Object,

default: function() {

return {

top: "32.25rem",

left: "0"

}

<