js兼容pc和移动端的简单拖拽效果

好代码要存起来：

<!DOCTYPE html>
<!-- saved from url=(0063)https://weiqiyjjs.github.io/room/example/jsexample/divmove.html -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>适配移动端的拖动效果</title>
    <style>
        #div1{
            height: 1000px;
        }
        #div2{
            position: absolute;
            top:0;
            left:0;
            width: 100px;
            height: 100px;
            background: #bbbbbb;
        }
    </style>
</head>
<body>
<div id="div1">
    <div id="div2"></div>
</div>
<script>
    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 = div2.offsetLeft;
        dy = div2.offsetTop;
    }
    function move(){
        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;
            div2.style.left = x+"px";
            div2.style.top = y +"px";
            //阻止页面的滑动默认事件
            document.addEventListener("touchmove",function(){
                event.preventDefault();
            },false);
        }
    }
    var div2 = document.getElementById("div2");
    div2.addEventListener("mousedown",function(){
        down();
    },false);
    div2.addEventListener("touchstart",function(){
        down();
    },false)
    div2.addEventListener("mousemove",function(){
        move();
    },false);
    div2.addEventListener("touchmove",function(){
        move();
    },false)
    document.body.addEventListener("mouseup",function(){
        flag = false;
    },false);
    div2.addEventListener("touchend",function(){
        flag = false;
    },false)
</script>

</body>
</html>

简单易用，就是这么任性。。。

 

 

 

ps:原文链接：http://blog.csdn.net/u014346301/article/details/53536714

posted @ 2017-07-21 16:34  汪洋是大大的海  阅读(845)  评论(0)  编辑  收藏  举报