悬浮球——手机端元素可以随意拖拽

手机端很多地方都会使用元素允许拖拽到指定位置或者随意位置，例如：悬浮球效果，那么怎么实现呢？

html部分：

<div  id="ball">  </div>

js部分：

var idom = document.getElementById("ball");
var contW = $(idom).width();
var contH = $(idom).height();
var startX, startY, sX, sY, moveX, moveY;
var winW = $(window).width();
var winH = $(window).height();
$(idom).on({ //绑定事件
	touchstart: function(e) {
		startX = e.originalEvent.targetTouches[0].pageX; //获取点击点的X坐标    
		startY = e.originalEvent.targetTouches[0].pageY; //获取点击点的Y坐标
		sX = $(this).offset().left; //相对于当前窗口X轴的偏移量
		sY = $(this).offset().top; //相对于当前窗口Y轴的偏移量
		leftX = startX - sX; //鼠标所能移动的最左端是当前鼠标距div左边距的位置
		rightX = winW - contW + leftX; //鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置
		topY = startY - sY; //鼠标所能移动最上端是当前鼠标距div上边距的位置
		bottomY = winH - contH + topY; //鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置      
		
	},
	touchmove: function(e) {
		e.preventDefault();
		//移动过程中XY轴的坐标要减去margin的距离
		moveX = e.originalEvent.targetTouches[0].pageX; //移动过程中X轴的坐标
		moveY = e.originalEvent.targetTouches[0].pageY; //移动过程中Y轴的坐标
		//判断的时候要计算加上padding的距离
		if(moveX < leftX) {
moveX = leftX;
		}
		if(moveX > rightX) {
moveX = rightX;
		}
		if(moveY < topY) {
moveY = topY+150;//顶部可留空间
		}
		if(moveY > bottomY) {
moveY = bottomY-80;//底部可留空间
		}
		if(startY<winH){
$(this).css({
	"top": moveY + sY - startY,
})
		}
//		$(this).css({
//"left": moveX + sX - startX,//去掉之后仅沿y轴移动
//"top": moveY + sY - startY,
//		})
	},