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