如何解决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;
    }