兼容手机与PC 拖动效果

由上面的一个案例改动时， 想写成 PC 与手机 都用兼容的时候， 发现用JQ 绑定 touchmove的时候， 一直找不到e.targetTouches.length，在手机模式下也找不到， 是undefind，最后从网上找了一翻， 把var touch = e.originalEvent.targetTouches[0];  这样写， 就可以了，

originalEvent 要了解一下。

下面是完全代码。

   // ps;

阐述一下。   移动端 可以用addEventListener  来绑定。 下面的绑定事件为什么 了on

on 是为了兼容PC 的。确保PC 上能正常 拖动。

 

<!doctype html>
<html>
<head>
    <meta charset='utf-8' />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>兼容手机与PC 拖动  </title>
</head>

<body>

<div id="div" style="width:100px;height:100px;background-color:red;position:absolute; top:50px; left: 50px; cursor: pointer"></div>

<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script>
    var div = document.getElementById('div');
    var oDiv=$("div");
    var oDivW=oDiv.width()/2;
    var ifKey=false;
    oDiv.on("mousedown touchstart", down);
    oDiv.on("touchmove mousemove", move);
    oDiv.on("touchend mouseout mouseup", up);
    //  div.addEventListener("touchmove", move)

    function down(e){
        e.preventDefault();
        e.stopPropagation();
        ifKey=true;

    }
    function up(e){
        e.preventDefault();
        e.stopPropagation();
        ifKey=false;

    }

    function move(e) {
        var bodyW=document.body.clientWidth||document.documentElement.clientWidth;
        var bodyH=document.body.clientHeight||document.documentElement.clientHeight;

        if(ifKey==true){
            e.preventDefault();//阻止其他事件
            // e.preventDefault();
            // 如果这个元素的位置内只有一个手指的话
            if (e.type=="touchmove") {
                // alert( e.targetTouches.length);
                var touch = e.originalEvent.targetTouches[0];  // 把元素放在手指所在的位置

                if(touch.pageX<oDivW){
                    touch.pageX=oDivW

                }else if(touch.pageX>(bodyW-oDivW)){
                    touch.pageX-=oDivW;
                }

                if(touch.pageY <oDivW){
                    touch.pageY=oDivW;

                }else if(touch.pageY>(touch.pageY-oDivW)){
                    touch.pageY-=oDivW;
                }

                div.style.left = (touch.pageX - oDivW) + 'px';
                div.style.top = (touch.pageY - oDivW) + 'px';
                div.style.background = "green";
            }else if(e.type=="mousemove"){
                var ox= e.clientX;
                var oy= e.clientY;
                 if(ox<oDivW){
                     ox=oDivW
                 }else if(ox>(bodyW-oDivW)){
                     ox=bodyW-oDivW
                 }

                if(oy<oDivW){
                    oy=oDivW

                }else if(oy>(bodyH-oDivW)){
                    oy=bodyH-oDivW;
                }
                div.style.left=(ox-oDivW)+"px";
                div.style.top=(oy-oDivW)+"px";

            }
        }

    }

</script>
</body>
</html>

 


上面是再次更改的效果。

 

posted @ 2015-07-22 15:31  328201736  阅读(421)  评论(0)    收藏  举报