(function(){
var extendEventDefaultOpt={
	touchdrag:{
		preventDefault:true,//阻止触摸移动的默认行为
		allowMultiTouch:false//允许在多点触控时也触发这个事件
	}
}
window.extendEvent={//扩展事件
	touchdrag:function(element,opt){
		var stats={},opt=Object.assign({},extendEventDefaultOpt.touchdrag,opt);
		element.addEventListener('touchstart',function(e){
			if(!opt.allowMultiTouch && e.changedTouches.length>1){stats={};return;}
			var ct=e.changedTouches;
			for(var t=ct.length;t--;){
				stats[ct[t].identifier]={x:ct[t].clientX,y:ct[t].clientY};
			}
		});
		element.addEventListener('touchmove',function(e){
			if(!opt.allowMultiTouch && e.touches.length>1){stats={};return;}
			var ct=e.changedTouches;
			for(var t=ct.length;t--;){
				var id=ct[t].identifier;
				if(!id in stats)continue;//不属于这个元素的事件
				var event=new TouchEvent('touchdrag',e);
				event.deltaX=ct[t].clientX-stats[id].x;
				event.deltaY=ct[t].clientY-stats[id].y;
				stats[id].x=ct[t].clientX;
				stats[id].y=ct[t].clientY;
				element.dispatchEvent(event);
			}
			if(opt.preventDefault)e.preventDefault();
		});
		element.addEventListener('touchend',function(e){
			var ct=e.changedTouches;
			for(var t=ct.length;t--;){
				var id=ct[t].identifier;
				if(id in stats)delete stats[id];
			}
		});
	}
}
})();

这是我做的一个自定事件，在其Event对象上会带有deltaX和deltaY两个属性以表示触摸拖动的偏移量。

用法是

extendEvent.touchdrag(元素,选项Object) //在元素上启用这个自定义事件

选项object的属性见上面源码里`extendEventDefaultOpt` 对象的两个属性。
然后当手指在元素上拖动的时候就会触发touchdrag事件。

DEMO (在触摸设备上拖动下面的方块)

以上DEMO源码

<div style="position: relative;"><div class="poipoi" style="background-color: #000;"></div><div class="poipoi" style="background-color: #ccc;"></div></div>


<style>.poipoi{position:absolute;width: 100px;height: 100px;}</style>
<script>
(function(){
var extendEventDefaultOpt={
	touchdrag:{
		preventDefault:true,//阻止触摸移动的默认行为
		allowMultiTouch:false//允许在多点触控时也触发这个事件
	}
}
window.extendEvent={//扩展事件
	touchdrag:function(element,opt){
		var stats={},opt=Object.assign({},extendEventDefaultOpt.touchdrag,opt);
		element.addEventListener('touchstart',function(e){
			if(!opt.allowMultiTouch && e.changedTouches.length>1){stats={};return;}
			var ct=e.changedTouches;
			for(var t=ct.length;t--;){
				stats[ct[t].identifier]={x:ct[t].clientX,y:ct[t].clientY};
			}
		});
		element.addEventListener('touchmove',function(e){
			if(!opt.allowMultiTouch && e.touches.length>1){stats={};return;}
			var ct=e.changedTouches;
			for(var t=ct.length;t--;){
				var id=ct[t].identifier;
				if(!id in stats)continue;//不属于这个元素的事件
				var event=new TouchEvent('touchdrag',e);
				event.deltaX=ct[t].clientX-stats[id].x;
				event.deltaY=ct[t].clientY-stats[id].y;
				stats[id].x=ct[t].clientX;
				stats[id].y=ct[t].clientY;
				element.dispatchEvent(event);
			}
			if(opt.preventDefault)e.preventDefault();
		});
		element.addEventListener('touchend',function(e){
			var ct=e.changedTouches;
			for(var t=ct.length;t--;){
				var id=ct[t].identifier;
				if(id in stats)delete stats[id];
			}
		});
	}
}
var pois=[].slice.call(document.querySelectorAll('.poipoi'));
pois.forEach(function(e){
	extendEvent.touchdrag(e,{allowMultiTouch:true});
	e.x=0;e.y=0;
	e.addEventListener('touchdrag',function(ev){
		e.x+=ev.deltaX;
		e.y+=ev.deltaY;console.log(e.x,e.y)
		e.style.top=(e.y|0)+'px';
		e.style.left=(e.x|0)+'px';
	});
}); })();</script>