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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
javascript下利用arguments实现string.format函数
Aug 24 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
vue实现公共方法抽离
Jul 31 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php下实现折线图效果的代码
2007/04/28 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
python字典的常用操作方法小结
2016/05/16 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python机器学习之神经网络(二)
2017/12/20 Python
Python登录注册验证功能实现
2018/06/18 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
python实现简单坦克大战
2020/03/27 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
说出一些常用的类,包,接口
2014/09/22 面试题
STP的判定过程
2012/10/01 面试题
英语系本科生求职信范文
2013/12/18 职场文书
中秋寄语大全
2014/04/11 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
驳回起诉裁定书
2015/05/19 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP