悬浮可拖拽按钮 通用（vue）

悬浮可拖拽按钮 通用（vue）

这个写成了vue的一个小子组件，当然原生js修改也能用

很简单的悬浮按钮 ：

// @mousedown @touchstart PC端和移动端的方法
// @mousemove @touchmove
// @mouseup @touchend
<template>
	<div>
		<button @click="onClick” @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end"  ref="fu" class="float">
			<van-icon name="weapp-nav" />//这个是vant 的图标组件,可以随意替换成文本或其他
		</button>
	</div>
</template>

<script>
export default {
	name:'',
	data () {
		return {
			flags: false,//控制使用
			position: {
				x: 0,
				y: 0
			},
			nx: '',
			ny: '',
			dx: '',
			dy: '',
			xPum: '',
			yPum: ''
		}
	},
	methods:{
		down() {
			this.flags = true;
			var touch;
			if (event.touches) {
				touch = event.touches[0];
			} else {
				touch = event;
			}
			this.position.x = touch.clientX;
			this.position.y = touch.clientY;
			this.dx = this.$refs.fu.offsetLeft;
			this.dy = this.$refs.fu.offsetTop;
		},
		move() {
			if (this.flags) {
				var touch;
				if (event.touches) {
					touch = event.touches[0];
				} else {
					touch = event;
				}
				this.nx = touch.clientX - this.position.x;
				this.ny = touch.clientY - this.position.y;
				this.xPum = this.dx + this.nx;
				this.yPum = this.dy + this.ny;
				let width=window.innerWidth - this.$refs.fu.offsetWidth//屏幕宽度减去自身控件宽度
				let height=window.innerHeight - this.$refs.fu.offsetHeight//屏幕高度减去自身控件高度
				this.xPum < 0 && (this.xPum = 0)
				this.yPum < 0 && (this.yPum = 0)
				this.xPum > width && (this.xPum = width)
				this.yPum > height && (this.yPum = height)
				// if (this.xPum >= 0 && this.yPum >= 0 && this.xPum<= width &&this.yPum<= height) {
					this.$refs.fu.style.left = this.xPum + 'px';
					this.$refs.fu.style.top = this.yPum + 'px';
				// }
				//阻止页面的滑动默认事件
				document.addEventListener(
					'touchmove',
					function() {
						event.preventDefault();
					},
					false
				);
			}
		},
		//鼠标释放时候的函数
		end() {
			this.flags = false;
		},
		onClick(){
			//在这里我是作为子组件来使用的
			this.$emit('click')
		}
	}
}
</script>

//这里使用了stylus的语法
<style lang="stylus" scoped>
.float
	position absolute//定位
	right 20px//初始x轴位置
	top 60%//初始Y轴位置
	touch-action none //这个是重点如果不加新版谷歌会忽略掉touch方法
	text-align center
	width 48px
	height 48px
	border-radius 24px
	line-height 48px
	background rgba(95, 95, 105, 0.88)
	color white
</style>