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 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
新手简单了解vue
May 29 Javascript
react使用CSS实现react动画功能示例
May 18 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 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
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
Python中optparse模块使用浅析
2015/01/01 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python用for循环实现九九乘法表
2018/05/31 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python截图并保存的具体实例
2021/01/14 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
销售高级职员求职信
2013/10/29 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
迟到检讨书5000字
2014/01/31 职场文书
继承权公证书
2014/04/09 职场文书
事业单位考察材料范文
2014/12/25 职场文书
工人先锋号申报材料
2014/12/29 职场文书
交通事故协议书范本
2016/03/19 职场文书