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 相关文章推荐
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
js实现金山打字通小游戏
Jul 24 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
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
PHP脚本中include文件出错解决方法
2008/11/20 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
javascript天然的迭代器
2010/10/29 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python全局变量用法实例分析
2016/07/19 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
python序列化与数据持久化实例详解
2019/12/20 Python
.dcm格式文件软件读取及python处理详解
2020/01/16 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
Shell编程面试题
2012/05/30 面试题
大学生优秀的自我评价分享
2013/10/22 职场文书
女生节标语
2014/06/26 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
500字作文之周记
2019/12/13 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
浅谈Redis缓冲区机制
2022/06/05 Redis