码迷,mamicode.com
首页 > 移动开发 > 详细

移动端拖拽

时间:2017-09-06 19:33:53      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:document   dev   his   turn   add   off   span   blog   移动   

var move=document.getElementsByClassName("page1_2")[0];
    var startX=0;
    var startY=0;
    var x=0;
    var y=0;
    var off = 0;

    move.addEventListener("touchstart", function (e) {
        var e = e || event;
        off=1;
        startX = this.offsetLeft;
        startY = this.offsetTop;
        x=e.touches[0].pageX-startX;
        y=e.touches[0].pageY-startY;

    });

    document.addEventListener("touchmove", function (e) {
        var e = e || event;
        if (!off)return;
        var x1=e.touches[0].pageX-x;
        var y1=e.touches[0].pageY-y;
        if(x1<0){
            x1=0
        }
        if(y1<0){
            y1=0
        }
        if(x1>window.innerWidth-move.offsetWidth){
            x1=window.innerWidth-move.offsetWidth
        }
        if(y1>window.innerHeight-move.offsetHeight){
            y1=window.innerHeight-move.offsetHeight
        }
        move.style.left=x1+‘px‘;
        move.style.top=y1+"px";
});

        document.addEventListener(‘touchend‘, function (e) {
            off = 0;
        });

 

移动端拖拽

标签:document   dev   his   turn   add   off   span   blog   移动   

原文地址:http://www.cnblogs.com/xiaobaibubai/p/7486292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!