移动端的拖拽基本和pc端差不断，就是onmousedown、onmousemove、onmouseup，有些不同 其他基本差不多 就是都要事件绑定，废话少说撸起！！！！
js--
function drag(oBox){
var x=0;//初始值
var y=0;
oBox.addEventListener('touchstart',function(ev){
var disX=ev.targetTouches[0].pageX-x;//判断手指点下的点到页面x轴的距离
var disY=ev.targetTouches[0].pageY-y;
var id=ev.targetTouches[0].identifier;
function fnMove(ev){
if(ev.targetTouches[0].identifier==id){
x=ev.targetTouches[0].pageX-disX;
y=ev.targetTouches[0].pageY-disY;
oBox.style.WebkitTransform='translate('+x+'px,'+y+'px)';
}
}
function fnEnd(ev){
if(ev.changedTouches[0].identifier==id){
document.removeEventListener('touchmove',fnMove,false);
document.removeEventListener('touchend',fnEnd,false);
}
}
document.addEventListener('touchmove',fnMove,false);
document.addEventListener('touchend',fnEnd,false);
ev.preventDefault();
},false);
}
document.addEventListener('DOMContentLoaded',function(){
var aDiv=document.querySelectorAll('div');
for(var i=0;i<aDiv.length;i++){
drag(aDiv[i]);
}
},false)
html部分两个div搞定
<div id="box"></div>
<div id="box2"></div>
css代码
box{width:100px;height:100px; background:red; position:absolute; top:0;left:0;}
#box2{width:100px;height:100px; background:blue; position:absolute; top:0;right:0;}
