JavaScript拖拽（二）：限制在客户区的拖拽(解决scrollLeft和scrollTop)

最新推荐文章于 2022-07-19 10:06:29 发布

GY_U_YG

最新推荐文章于 2022-07-19 10:06:29 发布

阅读量564

点赞数

分类专栏：前端拖拽文章标签： javascript 鼠标

本文链接：https://blog.csdn.net/GY_U_YG/article/details/72353578

版权

前端同时被 2 个专栏收录

61 篇文章 6 订阅

订阅专栏

拖拽

4 篇文章 0 订阅

订阅专栏

限制范围的拖拽，要求被拖拽的对象必须在客户区可见范围！
div是body的子元素，div的left/top是针对body的，不是针对可见客户区的，所以在拖拽的过程中不得不考虑被卷走的部分，因为网页文档可能很大，无论宽度还是高度都可能大于客户区，等于客户区大小就很好处理，大于的话就得考虑scrollTop和scrollLeft，否则div会跟鼠标脱离，因为距离都算错了

/*切记：凡是clientX/Y 的 一定记得卷走的部分*/
document.body是DOM中Document对象里的body节点,
document.documentElement是文档对象根节点(html)的引用,
document.documentElement.scrollHeight网页整体高度


function getPos(ev) {
    var st = document.documentElement.scrollTop || document.body.scrollTop;
    var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
    return {x:sl+ev.clientX, y:st+ev.clientY};
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>客户区可见范围限制拖拽</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        #div1 {
            width: 100px;
            height: 100px;
            background: orange;
            position: absolute;
        }
    </style>
</head>
<body style="width: 200000px;height: 200000px;">
    <div id="div1"></div>

    <script type="text/javascript">
        var oDiv = document.getElementById('div1');
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, null)[attr];
            }
        }

        //getPos得到的是鼠标当前位置距离页面最左/上边的距离,包括被卷走的部分
        function getPos(ev) {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {
                x : scrollLeft + ev.clientX,
                y : scrollTop + ev.clientY
            };
        }
        function getScrollPos() {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
            return {
                x : scrollLeft,
                y : scrollTop
            };      
        }
        oDiv.onmousedown = function(ev) {
            var oEvent = ev || event;
            var pos = getPos(oEvent);
            var disX = pos.x - parseInt(getStyle(oDiv, 'left'));
            var disY = pos.y - parseInt(getStyle(oDiv, 'top'));
            document.onmousemove = function(ev) {
                var oEvent = ev || event;
                var l = oEvent.clientX - disX;
                var t = oEvent.clientY - disY;
                if (l < 0) {
                    l = 0;
                } else if (l > document.documentElement.clientWidth - oDiv.offsetWidth) {
                    l = document.documentElement.clientWidth - oDiv.offsetWidth;
                }

                if (t < 0) {
                    t = 0;
                } else if (t > document.documentElement.clientHeight - oDiv.offsetHeight) {
                    t = document.documentElement.clientHeight - oDiv.offsetHeight;
                }

                l = l + getScrollPos().x;//最后left是相对于body的，加上卷走的部分scrollLeft；
                t = t + getScrollPos().y;//加上卷走的高度scrollTop

                // oDiv.style.left = l + 'px';
                // oDiv.style.top = t + 'px';

                oDiv.style.cssText = ';left:' + l + 'px;top:' + t + 'px;';
            };

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    </script>
</body>
</html>