HTML5 移动端div块跟随手指拖动

来源：互联网发布：阿里云国际版注册攻略编辑：程序博客网时间：2024/05/17 23:38

移动端div块跟随手指拖动，pc端div根据鼠标拖动请用mousemove事件，代码如下请勿转载！

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">    <script type="text/javascript" src="js/jquery.1.9.1.js"></script>    <title>div块跟随手指拖动</title></head><body>    <div id="id"></div>    <style type="text/css">        div{            width: 200px;            height: 200px;            background: #ccc;            position: absolute;            left: 0px;            top: 100px;        }    </style>    <script type="text/javascript">    var _x_start,_y_start,_x_move,_y_move,_x_end,_y_end,left_start,top_start;        document.getElementById("id").addEventListener("touchstart",function(e)        {            _x_start=e.touches[0].pageX;            _y_start=e.touches[0].pageY;            // console.log("start",_x_start)            left_start=$("#id").css("left");            top_start=$("#id").css("top");        })        document.getElementById("id").addEventListener("touchmove",function(e)        {            _x_move=e.touches[0].pageX;            _y_move=e.touches[0].pageY;            // console.log("move",_x_move)            $("#id").css("left",parseFloat(_x_move)-parseFloat(_x_start)+parseFloat(left_start)+"px");            $("#id").css("top",parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start)+"px");            console.log(parseFloat(_y_move)-parseFloat(_y_start)+parseFloat(top_start));        })        document.getElementById("id").addEventListener("touchend",function(e)        {            var _x_end=e.changedTouches[0].pageX;            var _y_end=e.changedTouches[0].pageY;            // console.log("end",_x_end)        })        //阻止浏览器下拉事件        $('body').on('touchmove', function (event) {event.preventDefault();});        // or        // document.addEventListener('touchmove', function(e){e.preventDefault()}, false);    </script></body></html>

1 0