Jquery 拖动页面

最新推荐文章于 2025-05-22 11:48:09 发布

wangyile4399

最新推荐文章于 2025-05-22 11:48:09 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： css jquery 文章标签： jquery 拖拽浏览器

本文链接：https://blog.youkuaiyun.com/wangyile4399/article/details/78395137

css 同时被 2 个专栏收录

2 篇文章

订阅专栏

jquery

1 篇文章

订阅专栏

前头重点：jquery pc拖动的页面不适用手机端，如需移动端拖拽下方留言

首先来区分screenX ，clientX和pageX区别

screenX ：鼠标位置相对于屏幕水平偏移量（参照点：屏幕的左上角）

clientX：鼠标位置相对于浏览器水平偏移量（参照点：浏览器内容区域左上角，会随着浏览器滚动条改变而改变（动值））。
特点区分：坐标值不会随着浏览器滚动条改变而改变，方便计算鼠标于浏览器窗口的绝对距离。

pageX：鼠标位置相对于浏览器水平偏移量（参照点：浏览器内容区域左上角，不会随着浏览器滚动条改变而改变（定值））
特点区分：坐标点会随着浏览器滚动条改变而改变，方便计算鼠标于文档移动的距离。

这里使用的是 pageX 只是简单得实现一下拖拽的效果，不适用移动端。如下例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery拖动页面</title>
    <style type="text/css">
        html,body{overflow: hidden;}
        .demo{position:absolute;left:200px;top:200px;color: #fff;font-size: 30px; width:250px;height:250px;border:1px solid #ddd;background:#008000;text-align:center;line-height:250px;cursor: pointer;}
        .demo span{position: absolute;right: -100px; top: 0;color: blue;font-size: 15px; line-height: 25px;}
    </style>
</head>
<body>
    <div class="demo">拖拽<span>pageX:0<br>pageY:0</span></div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        var _move=false;
        var _x,_y;
        $(document).ready(function(){
            $(".demo").mousedown(function(e){
                _move=true;
                _x=e.pageX-parseInt($(".demo").css("left"));
                _y=e.pageY-parseInt($(".demo").css("top"));
                $(".demo").fadeTo(20, 0.5);
            });
            $(document).mousemove(function(e){
                if(_move){
                    var x=e.pageX-_x;
                    var y=e.pageY-_y;
                    $(".demo").css({top:y,left:x});
                    $(".demo span").html("pageX:"+e.pageX+"<br>pageY:"+e.pageY);
                }
            }).mouseup(function(){
            _move=false;
            $(".demo").fadeTo("fast", 1);
          });
        });
    </script>
</body>
</html>