1. 程式人生 > >移動端拖拽

移動端拖拽

   var flag = false;
    var cur = {
        x:0,
        y:0
    } 
    var nx,ny,dx,dy,x,y ;
    function down(){
        flag = true;
        var touch ;
        if(event.touches){
            touch = event.touches[0];
        }else {
            touch = event;
        }
        cur.x = touch.clientX;
        cur.y = touch.clientY;
        dx = someElm.offsetLeft;
        dy = someElm.offsetTop;
        $("#someElm").css("background",'url(images/ic_condition_hover.png)no-repeat')
         $("#someElm").css("background-size","100%")
    }
    function move(){
          
          $("#someElm").css("background",'url(images/ic_condition_hover.png)no-repeat')
          $("#someElm").css("background-size","100%")
          $("html").css("overflow","hidden")
        if(flag){
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            nx = touch.clientX - cur.x;
            ny = touch.clientY - cur.y;
            x = dx+nx;
            y = dy+ny;
            someElm.style.left = x+"px";
            someElm.style.top = y +"px";
        }       
   }
    function end(){
        var Y = $("#someElm").offset().top;
        var X = $('#someElm').offset().left;
        var X_width = $("#someElm").width();
        var Y_height = $("#someElm").height();
        if( X >= document.body.clientWidth-X_width){
            $("#someElm").css({"left":document.body.clientWidth-X_width+"px"})
        }else if(X <= 0){
            $("#someElm").css({"left":0})
        }else if(Y<= 0){
            $("#someElm").css({"top":0})
        }
          
          $("#someElm").css('background',"url(images/ic_condition.png)no-repeat")
          $("#someElm").css("background-size","100%")
          $("html").css("overflow","auto")
         flag = false;
    }
    var someElm = document.getElementById("someElm");
    someElm.addEventListener("mousedown",function(){
        down();
    },false);
    someElm.addEventListener("touchstart",function(){
        down();
    },false)
    someElm.addEventListener("mousemove",function(){
        move();
    },false);
    someElm.addEventListener("touchmove",function(e){
        e.preventDefault();
        move();
    },false)
    document.body.addEventListener("mouseup",function(){
        end();
    },false);
    someElm.addEventListener("touchend",function(){
        end();
    },false);