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 对象的定义方法
Jan 10 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
iview实现动态表单和自定义验证时间段重叠
Jan 10 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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
PHP插入排序实现代码
2013/04/04 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php去除数组中重复数据
2014/11/18 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
jQuery插件jquery-barcode实现条码打印的方法
2015/11/25 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
浅谈ng-zorro使用心得
2018/12/03 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Python 迭代器工具包【推荐】
2016/05/06 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
python制作小说爬虫实录
2017/08/14 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
Python 处理图片像素点的实例
2019/01/08 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
python匿名函数的使用方法解析
2019/10/10 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
个人能力自我鉴赏
2014/01/25 职场文书
集结号观后感
2015/06/08 职场文书
超级礼物观后感
2015/06/15 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python