移动端入门篇之拖拽

移动端的拖拽基本和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

html部分两个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;}