移动端入门篇之拖拽

2017-02-10 14:35
253

移动端的拖拽基本和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;}
帖子评论

关注 / 粉丝

我无话可说