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

最新推荐文章于 2024-04-20 11:06:33 发布

置顶 ITer_hua

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量1.6w

点赞数 1

分类专栏： HTML5 文章标签：移动 html5 鼠标 pc

本文链接：https://blog.csdn.net/ITer_hua/article/details/53502328

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

移动端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>

ITer_hua

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
HTML5 移动端div块跟随手指拖动

移动端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=
复制链接

扫一扫