uniapp实现可自由移动按钮

最近公司APP上需要做一个可自由移动的按钮，具体实现步骤如下：

第一步：在页面上写一个<view>按钮</view>

<view class="guajianr"
		:style="{'transform':'translate3d('+xMove+'px,'+yMove+'px,0)'}"
		@touchstart="handleStart"
		@touchmove="handleMove"
		@touchend="handleEnd">
			按钮
</view>

在按钮上分别用@touchstart="handleStart"，@touchmove="handleMove"，@touchend="handleEnd"来控制按钮

第二步：js部分

var curPoint = {
		x:0,
		y:0
};//记录原点
var startPoint = {};
var isTounchMove = false;
methods: {
			handleStart(ev){
				//console.log(ev);
				//记录一开始手指按下的坐标
				var touch = ev.changedTouches[0];
				startPoint.x = touch.pageX;
				startPoint.y = touch.pageY;
			},
			handleMove(ev){
				//防止页面高度很大，出现滚动条，不能移动，默认拖动滚动事件
				ev.preventDefault();
				isTounchMove = true;
				var touch = ev.changedTouches[0];
				var diffPoint = {};//存放差值
				var movePoint = {
					//记录移动的记录
					x:0,
					y:0
				};
				diffPoint.x = touch.pageX - startPoint.x;
				diffPoint.y = touch.pageY - startPoint.y;
				//移动的距离 = 差值 + 当前坐标
				movePoint.x = diffPoint.x + curPoint.x;
				movePoint.y = diffPoint.y + curPoint.y;
				this.move(movePoint.x,movePoint.y);
			},
			 handleEnd(ev){
			    if (!isTounchMove) return;  
				//  更新坐标原点  
			    var touch = ev.changedTouches[0];  
			    curPoint.x += touch.pageX - startPoint.x;  
			    curPoint.y += touch.pageY - startPoint.y;  
			    // 重置
			    isTounchMove = false;  
			},  
			move(x,y){
				x = x || 0; // 没有传就是0  
				y = y || 0;  
				this.xMove = x;  
				this.yMove = y;  
				// translate3d  (tx,ty,tz)  在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px  
			},
}

 完成！！