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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
js简单倒计时实现代码
Apr 30 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
Mar 30 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
vue-router 中 meta的用法详解
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
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
php反射应用示例
2014/02/25 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
React实现轮播效果
2020/08/25 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
Python编写生成验证码的脚本的教程
2015/05/04 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
全球精选男装和家居用品:Article
2020/04/13 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
2015年妇幼保健工作总结
2015/05/19 职场文书
就业推荐表院系意见
2015/06/05 职场文书
社区服务活动感想
2015/08/11 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
Mysql 一主多从的部署
2022/05/20 MySQL
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android