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实现的在当前窗口中漂浮框的代码
Mar 15 Javascript
jquery遍历select元素(实例讲解)
Dec 31 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
前端jquery部分很精彩
May 03 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
js生成word中图片处理方法
Jan 06 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 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 define函数的使用说明
2008/08/27 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
nohup的用法
2012/11/26 面试题
结婚典礼证婚词
2014/01/08 职场文书
安全检查管理制度
2014/02/02 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
社区党务公开实施方案
2014/03/18 职场文书
村居抓节水倡议书
2014/05/19 职场文书
主题党日活动总结
2014/07/08 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
nginx内存池源码解析
2021/11/20 Servers
Python保存并浏览用户的历史记录
2022/04/29 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers