移动端例子div随手指移动

来源：互联网发布：大数据概念的产生编辑：程序博客网时间：2024/05/22 15:44


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        @charset "utf-8";
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
        form,fieldset,input,textarea,p,blockquote,th,td,section,canvas {
            padding: 0;
            margin: 0;
        }
        #container{
            position: absolute;
            left: 100px;
            top:100px;
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
        #box{
            position: absolute;
            left:0;
            top:0;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>


<body>
    <div id="container">
        <div id="box"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        //        移动设备兼容
        if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                var phoneScale = parseInt(window.screen.width)/640;
                document.write('<meta name="viewport" content="width=640, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
            }else{
                document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
            }
        }else{
            document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
        }
        //        移动设备兼容


        window.onload = function(){
        var mobile   = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
        var touchstart = mobile ? "touchstart" : "mousedown";
        var touchend = mobile ? "touchend" : "mouseup";
        var touchmove = mobile ? "touchmove" : "mousemove";

    //阻止屏幕滑动(阻止默认行为)

 $('html,body').on(touchmove,function(e){        e.preventDefault()    });        var boxObj = document.getElementById('box');        var containerObj = document.getElementById('container');        var _event,starX,starY,maxW,maxH,tx,ty;        boxObj.addEventListener(touchstart,function(event){            _event = event || window.event;            starX = _event.touches[0].clientX - boxObj.offsetLeft;            starY = _event.touches[0].clientY - boxObj.offsetTop;        },false);        boxObj.addEventListener(touchmove,function(event){            _event = event || window.event;            var moveX = _event.touches[0].clientX - starX,                moveY = _event.touches[0].clientY - starY;            maxW = containerObj.offsetWidth - boxObj.offsetWidth;            maxH = containerObj.offsetHeight - boxObj.offsetHeight;            if(moveX<0){                moveX=0            }else if(moveX>maxW){                moveX=maxW;            }            if(moveY<0){                moveY=0            }else if(moveY>maxH){                moveY=maxH;            }            boxObj.style.left = moveX+'px';            boxObj.style.top = moveY+'px';        },false);        }    </script></body></html>

1 0

移动端 例子div随手指移动

移动端例子div随手指移动