uni-app拖动

<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>

方法二

<template>
	<div class="scan" :style="'transform: translate('+ x +'px,' + y +'px);'" @touchstart="touchS" @touchmove.stop.prevent="touchM" @touchend="touchE">
		<image src="../static/icon35.png"></image>
		<view>客服</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isC: false,
				start: {
					left: 0,
					top: 0
				},
				x: 0,
				y: 0,
				oldx: 0,
				oldy: 0,
				screenHeight: 667,
				screenWidth: 375
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.screenHeight - 30;
					this.screenWidth = res.screenWidth - 30;
				}
			});
		},
		methods: {
			touchS(val) {
				this.isMove = true
				this.start.left = val.changedTouches[0].clientX
				this.start.top = val.changedTouches[0].clientY
			},
			touchM(val) {

				let clientX = val.changedTouches[0].clientX,
					clientY = val.changedTouches[0].clientY
				clientX = clientX < 30 ? 30 : clientX
				clientX = clientX > this.screenWidth ? this.screenWidth : clientX;
				clientY = clientY < 100 ? 100 : clientY
				clientY = clientY > this.screenHeight ? this.screenHeight : clientY;
				this.x = this.oldx + clientX - this.start.left
				this.y = this.oldy + clientY - this.start.top

			},
			touchE(val) {
				// // this.x = this.x < 20 ? 20 : this.x
				this.oldx = this.x
				this.oldy = this.y
				this.isMove = false
			}


		}
	}
</script>

<style lang="scss" scoped>
	.scan {
		position: fixed;
		bottom: 60rpx;
		left: 48%;
		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;
		image{
			width: 32rpx;
			height: 30rpx;
		}
		view{
			width: 40rpx;
			height: 28rpx;
			font-size: 20rpx;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
		}
	}
</style>

 注：建议使用第二个，第一个有点问题还未修改。

@touchstart.stop.prevent="handleStart" @touchmove.stop.prevent="handleMove" @touchend.stop.prevent="handleEnd" 主要是 @touchstart.stop.prevent这个方法阻止事件冒泡，如果还想同时接入使用微信小程序客服功能，那么@touchstart后不加.stop.prevent