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 相关文章推荐
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
vue+element实现表单校验功能
May 20 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
python的re正则表达式实例代码
2018/01/24 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
日本小田急百货官网:Odakyu
2018/07/19 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
销售总经理岗位职责
2014/03/15 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
大队委员竞选稿
2015/11/20 职场文书