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 相关文章推荐
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
微信小程序云开发之使用云函数
May 17 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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/01 无线电
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
php定时计划任务的实现方法详解
2013/06/06 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
python del()函数用法
2013/03/24 Python
Python列表append和+的区别浅析
2015/02/02 Python
Python处理Excel文件实例代码
2017/06/20 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python安装scipy的步骤解析
2019/09/28 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
保护黄河倡议书
2014/05/16 职场文书
企业宣传策划方案
2014/05/29 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
观后感格式
2015/06/19 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers