移动端实现拖动操作

Drag.prototype.touchstart = function(e) {
	e.preventDefault();
	e.stopPropagation();
	var tar = e.target;
	//执行定义在拖动开始时须执行的函数， 参数为即将拖动的元素
	this.opts.onStart(tar);
	//初始化拖动元素的位置信息；
	this.dragT = tar.offsetTop;
	this.dragL = tar.offsetLeft;
	this.dragW = tar.offsetWidth || tar.clientWidth;
	this.dragH = tar.offsetHeight || tar.clientHeight;
	//定义开始移动位置
	this.startX = e.pageX || e.touches[0].pageX;
	this.startY = e.pageY || e.touches[0].pageY;
	//重置移动参数
	this.moveX = this.moveY = 0;
}
Drag.prototype.touchmove = function(e) {
	var tar = e.target;
	this.opts.onMove(tar);
大专栏  移动端实现拖动操作lass="line">	this.nowX = e.pageX || e.touches[0].pageX;
	this.nowY = e.pageY || e.touches[0].pageY;
	//计算目标元素需移动的距离
	this.moveX = this.nowX - this.startX;
	this.moveY = this.nowY - this.startY;
	//检测是否越界，并调整
	this.checkOver(this.moveX, this.moveY);
	
	//进行拖动元素移动操作
	this.setMove(tar);
	//检测是否落入目标位置
	this.checkPos('move', tar);
}
Drag.prototype.touchend = function(e) {
	
	//目标区域的视觉变化
	this.tarEle.style.cssText = "opacity: .5;"
	//检测最终位置
	this.checkPos('end', e.target);
}

Drag.prototype.setMove = function(e, type) {
	var x = this.moveX || 0,
		y = this.moveY || 0；
	if(type === 'reset') {
		e.style.cssText = '';
		return;
	}
	e.style.cssText += 'position: absolute;-webkit-transform: translate('+x+'px,'+y+'px);';
}

Drag.prototype.checkPos = function(type, e) {
	//判断拖动元素是否到达目标位置，判断方式更具情况而定，此处判断的依据是：touch事件位置判断，即结束时touch的位置是否在目标区域位置
	if(this.nowX > this.tarL && this.nowX < this.tarL + this.tarW &&  this.nowY > this.tarT && this.nowY < this.tarT + this.tarH) {
		//进入目标区域
		if(type === 'move' && !!this.opts.tarEle) {
			//在移动过程中，进入目标区域
			this.opts.onMoveIn(this.tarEle);
		} else {
			//在拖动结束时进入目标区域
			this.opts.onEnd(e);
		}
	} else {
		//落在目标区域外的情况
		this.tarEle.style.cssText = "opacity: .5;"
		if(type === 'end'){
			this.resetFun(e);
		}
	}
}