JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)

2022-01-11,,,,

这篇文章主要介绍了JavaScript限制在客户区可见范围的拖拽解决scrollLeft和scrollTop的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

限制范围的拖拽,要求被拖拽的对象必须在客户区可见范围!

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}; } 
   客户区可见范围限制拖拽 * { padding: 0; margin: 0; } #div1 { width: 100px; height: 100px; background: orange; position: absolute; }  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

以上就是JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)的详细内容,更多请关注本站其它相关文章!

《JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2).doc》

下载本文的Word格式文档,以方便收藏与打印。