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 相关文章推荐
js时间比较示例分享(日期比较)
Mar 05 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
微信小程序实现日历签到
Sep 21 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
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
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
js原生代码实现轮播图的实例讲解
2017/07/28 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
Python模拟用户登录验证
2017/09/11 Python
python中wx模块的具体使用方法
2020/05/15 Python
python Cartopy的基础使用详解
2020/11/01 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
医学求职自荐信
2014/06/21 职场文书
公司门卫工作职责
2014/06/28 职场文书
商务经理岗位职责
2014/08/03 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
会议主持词结束语
2015/07/03 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers