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

来源：互联网发布：php 时间轴源码编辑：程序博客网时间：2024/06/07 04:50

限制范围的拖拽，要求被拖拽的对象必须在客户区可见范围！
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>

阅读全文

0 0