html移动端可拖拽,移动端拖拽全兼容框架

今天花了点时间，写了一份在移动设备上使用的拖拽功能，次拖拽和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

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

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

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

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);