移动端-div随手指移动

最新推荐文章于 2021-06-04 17:02:49 发布

Lucy-

最新推荐文章于 2021-06-04 17:02:49 发布

阅读量1.2k

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/lm1022/article/details/78913738

版权

移动端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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_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>

pc端用mousemove事件