vue可以拖拽移动浮球

拖拽移动浮球参考链接：vue拖拽移动（类似iphone虚拟家），vue实现类iphone的浮球需求拆解1.元素悬浮全屏2.元素可以拖动移动3.拖动后元素将附着在墙上。4.可以点击元素调出菜单。5.当菜单展开后，点击空白处关闭菜单。当拖到靠近底部时，如果剩余高度不足以展开菜单，它会自动吸附到底部。如果实现思路适配移动端，需要添加触摸事件1.鼠标按下时1.1.如果此时打开菜单，则不会有任何反应1.2。如果菜单未打开，则记录按下状态为true，并记录x、y轴坐标2.动态计算按下移动时的坐标，设置拖动元素的样式控件位置；2.1.拖动区域溢出时归位的判断；2.2.防止拖动时页面滑动2.3。增加拖动计数按下状态为false3.2。根据元素位置和容器的高宽动态计算元素的最终位置。4.元素点击事件4.1.如果拖动计数与历史计数之差小于10，则执行点击事件。4.2.否则执行过程不会被执行exportdefault{name:"homeDragbtn",props:{//通过position设置初始定位position:{type:Object,default:function(){return{top:"32.25rem",left:"0"}}}},data(){return{menuOpen:false,//菜单打开状态mouseDownState:false,//鼠标clickStateiX:0,iY:0,dX:0,dY:500,//初始定位lastMoveIndex:0,//拖动计数curMoveIndex:0,//历史计数}},methods:{//mousedowndemo_down(event){//如果菜单打开，不响应if(this.menuOpen){this.mouseDownState=false;返回}console.log("demo_down",event);/*这里判断是pc端还是移动端获取到event事件*/vartouch;如果(event.touches){touch=事件。触摸[0]；}else{touch=事件;}//鼠标点击面向页面的x坐标和y坐标let{clientX,clientY}=touch;//Mousex-coordinates-dragbuttonx-coordinatestogetthemousedistancefromthedragbuttondistancethis.iX=clientX-this.$refs.actionMgr.offsetLeft;//鼠标y坐标-拖动按钮y坐标，获取鼠标与拖动按钮的距离this.iY=clientY-this.$refs.actionMgr.offsetTop;//设置当前状态为鼠标按下this.mouseDownState=true;},//鼠标被拖动demo_move(event){//鼠标向下移动if(this.mouseDownState){console.log("demo_move",event);/*这里判断是pc端还是移动端获取到event事件*/vartouch;如果（事件。触摸）{touch=event.touches[0];}else{touch=事件;}//鼠标移动时页面的x坐标和y坐标let{clientX,clientY}=touch;//当前页面全局容器dom元素获取容器宽度Highlet{clientHeight:pageDivY,clientWidth:pageDivX}=this.$refs.pageDiv;/*鼠标坐标——鼠标与拖动按钮的距离坐标得到拖动按钮左上角的x轴y轴坐标*/let[x,y]=[clientX-this.iX,clientY-this.iY];//拖动按钮dom元素获取宽高style对象/*这里判断拖动按钮是否超过屏幕宽高或者小于设置的屏幕最大值x=globalcontainerxy=globalcontainery否则设置为x=0y=0*/if(x>pageDivX-actionMgrX)x=pageDivX-actionMgrX;否则如果(x<0)x=0;如果（y＆g吨;pageDivY-actionMgrY)y=pageDivY-actionMgrY;否则如果（y<0）y=0；this.dX=x;this.dY=y;//计算后设置按钮位置actionMgrStyle.left=`${x}px`;actionMgrStyle.top=`${y}px`;actionMgrStyle.bottom="自动";actionMgrStyle.right="自动";//移动索引this.lastMoveIndex++;//当按键按下滑动时，阻止屏幕滑动事件event.preventDefault();}},//鼠标向上demo_up(event){console.log("demo_up",event);//当前页面全局容器dom元素获取容器宽高let{clientHeight:windowHeight,clientWidth:windowWidth}=document.documentElement;console.log('全局容器：',windowWidth,windowHeight);//拖动按钮dom元素获取宽高样式对象let{clientHeight:actionMgrY,clientWidth:actionMgrX,样式：actionMgrStyle}=this.$refs.actionMgr;console.log('拖动按钮',actionMgrY,actionMgrX,actionMgrStyle);//计算坐标设置按钮位置if(this.dY>0&&this.dY<(windowHeight-50)){//不在顶部也不在底部if(this.dX<=(windowWidth/2)){//left小于或等于屏幕的一半actionMgrStyle.left=0;actionMgrStyle.right='自动';}else{//左边大于屏幕的一半actionMgrStyle.left='auto';actionMgrStyle.right=0;}if(this.dY>=(windowHeight/2)){//当宽度大于1/2时，将top改为auto，调整bottomactionMgrStyle.top='auto';actionMgrStyle.bottom=(windowHeight-this.dY-50)+'px';}}else{if(this.dY===0){//在顶部actionMgrStyle.top=0;actionMgrStyle.bottom='自动';}elseif(this.dY===(windowHeight-50)){actionMgrStyle.bottom=0;actionMgrStyle.top='自动';}if(this.dX>=(windowWidth/2)){//右边是把left改成auto，调整右边actionMgrStyle.left='auto';actionMgrStyle.right=(windowWidth-this.dX-50)+'px';}}this.mouseDownState=false;},//点击事件demo_click(){console.log("demo_click|moveIndex:",this.lastMoveIndex,this.curMoveIndex);//鼠标弹起后会触发点击事件//如果从上一次按下事件到下一次点击事件的移动次数小于10次，则视为纯点击事件if(this.lastMoveIndex-this.curMoveIndex<=10){//点击事件this.menuOpen=!this.menuOpen;if(this.menuOpen){//打开菜单}}this.curMoveIndex=this.lastMoveIndex},//点击空白关闭菜单closeOpenModal(){}}}.zlevelTop{z-index:9999;}.more-tran-animate{过渡：0.5s;}.moreModal{/*如果遇到滑动问题，1.3请检查z-indexz-index必须比web大一级*/z-index:9999;位置：固定；宽度：50px；高度：50px；边界半径：50%；背景色：#337AB7；行高：40px；文本对齐：居中；颜色：#fff；不透明度：0.6；{不透明度：1;}.six-more-modal-btn{位置：固定；z-指数：9999；宽度：14rem；高度：14rem；边界半径：5px；背景：#1A1A1A；.imgMore{宽度：100%；高度：100%；显示：弹性；证明内容：居中；对齐项目：居中；