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

最新推荐文章于 2025-06-30 09:09:04 发布

置顶 ITer_hua

最新推荐文章于 2025-06-30 09:09:04 发布

阅读量1.6w

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/ITer_hua/article/details/53502328

HTML5 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种实现移动端DIV元素跟随手指拖动的方法，并提供了完整的HTML、CSS和JavaScript代码示例。通过监听touchstart、touchmove及touchend事件，使DIV能够响应用户的触摸操作，在移动端实现流畅的拖动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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