前端：pageY、clientY、offsetY的区别&拖动效果优化

最新推荐文章于 2022-03-28 10:26:49 发布

浮云若飞

最新推荐文章于 2022-03-28 10:26:49 发布

阅读量1.1w

点赞数 9

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34911465/article/details/82468652

版权

前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

前言

之前我写过一篇html和JavaScript实现拖动效果的文章，这篇文章里面的东西实在是有些简单了，而且实际上会出现错误，错误效果如下：

这里写图片描述

同样的界面，我们滑动到最上面，效果却是正确的：

这里写图片描述

为什么呢，其实是因为位置的原因，当我们在最上面拖动时，拖动的空间距离顶部的距离是不变的，而当页面滑动到下方时，拖动的时候，页面的位置是不一样的，因此计算出来的也是错误的，引起错误的代码为这其中的clientY：

var list10 = document.getElementById('list10')
function fnMove(event,disX,disY,element){
    var l = event.clientX - disX,
        t = event.clientY - disY
    element.style.left=l+'px'
    element.style.top=t+'px'
}
list10.onmousedown = function(event) {
    event = event || window.event
    var disX = event.clientX - list10.offsetLeft,
    disY = event.clientY - list10.offsetTop;
    list10.style.position = 'fixed'
    document.onmousemove = function(event){
        event = event || window.event;
        fnMove(event,disX,disY,list10);
    }
    document.onmouseup = function(){
        document.onmousemove = null;
    }
}

这里就要讲解一下pageY、clientY、offsetY、layerY的区别了。

pageY、clientY、offsetY的区别

pageY：鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化；
clientY：鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点；
offsetY：IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值。

这就是我们前面导致错误的原因了，因为我们是采用clientY来计算的，使用client计算的时候，就会由于页面的滚动而计算的位置有错，因此我们这里改为pageY来计算：

var list10 = document.getElementById('list10')
function fnMove(event,disX,disY,element){
    var l = event.clientX - disX,
        t = event.clientY - disY
    element.style.left=l+'px'
    element.style.top=t+'px'
}
list10.onmousedown = function(event) {
    event = event || window.event
    var disX = event.offsetX
    var disY = event.offsetY
    list10.style.left=event.clientX - disX,+'px'
    list10.style.top=event.clientY - disY+'px'
    list10.style.position = 'fixed'
    document.onmousemove = function(event){
        event = event || window.event;
        fnMove(event,disX,disY,list10);
    }
    document.onmouseup = function(){
        document.onmousemove = null;
    }
}

效果如下：

这里写图片描述

源代码

<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
    </head>
    <body>
        <ul>
            <li id="list1">
                1
            </li>
            <li id="list2">
                2
            </li>
            ......
            <li id="list18">
                18
            </li>
            <li id="list19">
                19
            </li>
        </ul>
    </body>
    <script>
        var list10 = document.getElementById('list10')
        function fnMove(event,disX,disY,element){
            var l = event.clientX - disX,
                t = event.clientY - disY
            element.style.left=l+'px'
            element.style.top=t+'px'
        }
        list10.onmousedown = function(event) {
            event = event || window.event
            var disX = event.offsetX
            var disY = event.offsetY
            list10.style.left=event.clientX - disX,+'px'
            list10.style.top=event.clientY - disY+'px'
            list10.style.position = 'fixed'
            document.onmousemove = function(event){
                event = event || window.event;
                fnMove(event,disX,disY,list10);
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
    </script>
    <style>
        li {
            background-color: white;
            cursor: pointer;
            padding: 1rem;
            width: 10rem;
            box-shadow: 0px 0px 5px #ccc;
        }
    </style>
</html>