uniapp中移动dom

<template>
	<view>
		<button open-type="contact" class="customer" :style="{ bottom: bottom + 'px', right: right + 'px' }"  @touchstart="start" @touchmove.stop.prevent="move" @touchend="end">
			<image src="../../static/icon35.png"></image>
			<view>客服</view>
		</button>
	</view>
</template>
 
<script>
	export default{
		data(){
			return{
				bottom: 100,
				right: 15,
				pageX:0,
				pageY:0
			}
		},
		methods:{
			start(e) {
				console.log(e,'start')
				let page = e.changedTouches[0];
				this.pageX = page.pageX;
				this.pageY = page.pageY;
				// console.log('start:', page.pageX,page.pageY);
			},
			move(e) {
				// console.log(e,this,'move')
				let {pageX,pageY,bottom,right}=this;
				let page = e.changedTouches[0];
				let x = page.pageX-pageX;
				let y = page.pageY-pageY;
				this.pageX = page.pageX;
				this.pageY = page.pageY;
				this.right = right - x;
				this.bottom = bottom - y;
				// console.log('move:',page.pageX,page.pageY,  page.pageX-pageX,page.pageY-pageY,this.right,this.bottom);
			},
			end(e) {
				let page = e.changedTouches[0];
				// console.log('end:',  page.pageX,page.pageY);
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.customer{
		width: 90rpx;
		height: 90rpx;
		background-color: rgba(85, 127, 182,0.79);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: fixed;
		z-index: 999;
		image{
			width: 32rpx;
			height: 30rpx;
		}
		view{
			width: 40rpx;
			height: 28rpx;
			font-size: 20rpx;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
		}
	}
</style>