如何解决JavaScript限制在客户区可见范围的拖拽的问题

这篇文章主要为大家展示了“如何解决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};
}



  
  客户区可见范围限制拖拽
  
    * {
      padding: 0;
      margin: 0;
    }
    #div1 {
      width: 100px;
      height: 100px;
      background: orange;
      position: absolute;
    }
  


  
       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;       };     };   

以上是“如何解决JavaScript限制在客户区可见范围的拖拽的问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前标题:如何解决JavaScript限制在客户区可见范围的拖拽的问题
本文路径:http://scyanting.com/article/gscjhc.html

其他资讯