移动端拖拽全兼容框架

今天花了点时间，写了一份在移动设备上使用的拖拽功能，次拖拽和PC端的拖拽有几个不同的地方需要提一下：

    1.所有事件都需要绑定

    2.使用移动端的事件来组成拖拽的步骤，touchstart, touchmove,touchend

    3.关于元素坐标获取不适用之前的clientX(clientY),采用新的targetTouches[0].pageX(targetTouches[0].pageY)

    4.拖拽之后需要执行事件解绑removeEventListener

记住这四点简单的拖拽就是实现了，废话不多说，请看源码：

   /*
*	Author:LiangJingxian
*	useage:
*		dragM(选择器)
*			eg: dragM('#box');
*		dragM(选择器,json)
* 			eg: drarM('#box',{
* 					'y','false',//不允许在y轴上拖拽
*                   'limit','false',  //是否限制最小边框
*					'moveTop',function(){
* 							//向上拖的时候触发函数(moveLeft,moveRight,moveBottom)
* 						 }
*					'end',function(){
*							//拖拽完成之后触发的函数 
* 						 }
* 				})
*/
function dragM(obj,json){
		var oDiv = document.querySelector(obj);
		json = json || {};
		json.obj = oDiv; 
		json.x = json.x || "true" ;
		json.y = json.y || "true";
		json.limit = json.limit || "true";
		json.Tx = json.Tx || 0;
		json.Ty = json.Ty || 0;
		oDiv.addEventListener("touchstart",function(ev){
			var disX = ev.targetTouches[0].pageX-json.Tx;
			var disY = ev.targetTouches[0].pageY-json.Ty;
			function fnMove(ev){
				 if(json.x=="true"){
				 	json.Tx = ev.targetTouches[0].pageX-disX;
				 	if(json.limit =="true"){
				 		if(json.Tx<-(oDiv.offsetLeft)){
						 	json.Tx = -(oDiv.offsetLeft);
						}
						if(json.Tx>(document.documentElement.clientWidth-oDiv.offsetLeft-oDiv.offsetWidth)){
						 	json.Tx = document.documentElement.clientWidth-oDiv.offsetLeft-oDiv.offsetWidth;
						}
				 	}
					if(json.Tx<-10){
						json.moveLeft&&json.moveLeft();
					}else if(json.Tx>10){
						json.moveRight&&json.moveRight();
					}
				}else{
				 	json.Tx = 0;
				}
				if(json.y=="true"){
				 	json.Ty = ev.targetTouches[0].pageY-disY;
					if(json.limit =="true"){
						if(json.Ty<-(oDiv.offsetTop)){
						 	json.Ty=-(oDiv.offsetTop);
						};
						if(json.Ty>(document.documentElement.clientHeight-oDiv.offsetTop-oDiv.offsetHeight)){
						 	json.Ty = document.documentElement.clientHeight-oDiv.offsetTop-oDiv.offsetHeight;
						}
					}
					if(json.Ty<-10){
						json.moveTop&&json.moveTop();
					}else if(json.Ty>10){
						json.moveBottom&&json.moveBottom();
					}
				}else{
					json.Ty = 0; 	
				}
				json.move&&json.move();
				oDiv.style.WebkitTransform = "translate("+json.Tx+"px,"+json.Ty+"px)";
			}
			document.addEventListener("touchmove",fnMove,false);
			function fnEnd(ev){
				json.end&&json.end(); 
				document.removeEventListener("touchmove",fnMove,false);
				document.removeEventListener("touchend",fnMove,false);
				
			}
			document.addEventListener("touchend",fnEnd,false);
			ev.preventDefault();
			return false;
		},false);
}

用法：

见注释，因为在做移动端的时候用zepto，当在$(function(){})中执行DOMContentLoaded时候会有问题，所以没有写。

ps:补充说明

　　DOMContentLoaded这个事件是从HTML中的onLoad的延伸而来的，当一个页面完成加载时,初始化脚本的方法是使用load事件，

　　但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。

　　domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;

　　document.addeventListener('DOMContentLoaded',function(){...},false);

源码下载：https://github.com/80669256/dragM