您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要为大家展示了“如何解决JavaScript限制在客户区可见范围的拖拽的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决JavaScript限制在客户区可见范围的拖拽的问题”这篇文章吧。
限制范围的拖拽,要求被拖拽的对象必须在客户区可见范围!
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 > <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>
以上是“如何解决JavaScript限制在客户区可见范围的拖拽的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。