vue 悬浮按钮_Vue@哇！几行代码实现拖拽视图组件

概述

最近开发的项目中有一个分享的悬浮按钮，这个按钮遮挡了页面信息，产品经理跑过来问我，是否可以把这个按钮做成可以拖拽的，研究了一下轻松实现了这个功能，这里分享给大家。这个项目是基于vue的公众号网页，所以是通过vue来实现的，给大家一个参考。先来看一看效果：

分析

「1. 技术点」

组件封装插槽固定定位touchemove & mousemove 事件

「2. 实现思路」

首先封装drag-view组件，组件本身只处理拖拽逻辑，组件内容通过插槽由父组件传入。将drag-view设置为固定定位，然后在move事件中计算出left和top并赋值给drag-view即可。

「3. 处理计算」

top和left值的计算比较简单，我们只需要获取到触摸点的x、y坐标减去容器宽度、高度的一半即可，所以得出以下公式：

top=clientY-elHeight/2;

left=clientX-elWidth/2;

代码实现

「1. 组件部分」

<template>

<divclass="drag__wrapper"ref="dragRef":style="{top:pos.y+'px',left:pos.x+'px'}"

@mousemove="onTouchMove"

@touchmove.stop="onTouchMove"

>

<slot/>

div>

template>

<script>exportdefault{props:{position:{type:Object,default:()=>({x:300,y:500,

}),

},

data(){return{flags:false,pos:{x:0,y:0,

},

};

},

mounted(){//设置默认值this.pos={...this.$props.position};//获取容器元素的尺寸信息constrect=this.$refs.dragRef.getBoundingClientRect();//获取容器元素尺寸的一半便于后面计算使用this.wrapperHalfWidth=rect.width/2;this.wrapperHalfHeight=rect.height/2;//获取屏幕的尺寸信息constclientWidth=document.body.clientWidth||document.documentElement.clientWidth;constclientHeight=document.body.clientHeight||document.documentElement.clientHeight;//获取拖拽元素在屏幕内可拖拽的边界值this.maxX=clientWidth-rect.width;this.maxY=clientHeight-rect.height;

},methods:{

onTouchMove(event){//获取触点，兼容PC和移动端lettouch;if(event.touches){

touch=event.touches[0];

}else{

touch=event;

}//定位滑块的位置this.pos.x=touch.clientX-this.wrapperHalfWidth;this.pos.y=touch.clientY-this.wrapperHalfHeight;//处理边界if(this.pos.x0){

this.pos.x=0;

}elseif(this.pos.x>this.maxX){

this.pos.x=this.maxX;

}

if(this.pos.y0){

this.pos.y=0;