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


Posted in Javascript onMay 17, 2017

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

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>

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

Javascript 相关文章推荐
jquery 新浪网易的评论块制作
Jul 01 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 #Javascript
Angular.JS中的this指向详解
May 17 #Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 #Javascript
JavaScript简单拖拽效果(1)
May 17 #Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 #Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 #Javascript
Vue.js鼠标悬浮更换图片功能
May 17 #Javascript
You might like
天津市收音机工业发展史
2021/03/04 无线电
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
php while循环控制的简单实例
2016/05/30 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Python中操作MySQL入门实例
2015/02/08 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
使用python实现knn算法
2017/12/20 Python
python清除函数占用的内存方法
2018/06/25 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python实现最大优先队列
2019/08/29 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
Java程序员常见面试题
2015/07/16 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
优秀毕业生求职推荐信范文
2013/11/21 职场文书
协议书怎么写
2014/04/21 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
检举信的写法
2019/04/10 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
python高温预警数据获取实例
2022/07/23 Python