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之可拖动的iframe效果代码
Aug 01 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
JavaScript实现滑块验证解锁
Jan 07 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实现图片裁剪、添加水印效果代码
2014/10/01 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python单元测试框架unittest简明使用实例
2015/04/13 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
如何利用python发送邮件
2020/09/26 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
资金主管岗位职责范本
2014/03/04 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
招商银行收入证明
2015/06/17 职场文书