JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
时间:2019-03-30
本文章向大家介绍JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2),主要包括JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
限制范围的拖拽,要求被拖拽的对象必须在客户区可见范围!
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 八数码难题解法大全
- React第三方组件5(状态管理之Redux的使用⑥Redux DevTools)
- React第三方组件5(状态管理之Redux的使用⑤异步操作)
- HDU - 1846 Brave Game
- React多页面应用4(webpack4 提取第三方包及公共组件)
- zoj 2420
- SPOJ NWERC11B Bird tree
- React多页面应用6(gulp自动化发布到多个环境、生成版本号、压缩成zip等)
- SDIBT 1046 Primary Arithmetic
- 洛谷P2415 集合求和
- React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
- SDIBT 1046 Primary Arithmetic
- React多页面应用4(webpack自动化生成多入口页面)
- 第二周神经网络基础2.1 二分分类2.2 logistic回归2.3 logistic 回归损失函数2.4 梯度下降2.5 导数2.14 向量化logistic 回归的输出2.15 Python中的广
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 排障集锦:九九八十一难之第十六难!-------------enoent ENOENT: no such file or directory, open ‘/root/package.json‘
- 大点干!早点散----------深入剖析GFS分布式文件系统
- 大点干!早点散----------ELK企业日志分析系统理论+实战!
- 面试题系列第8篇:谈谈String、StringBuffer、StringBuilder的区别?
- HTTP协议的请求与数据抓包
- Ubuntu 18.04 LTS 通过 Netplan 配置网络教程
- 【kafka源码】kafka内部的一些术语
- TKE使用自建NFS持久化存储
- 网站 SSL 检测 PCI DSS 不合规解决办法
- leetcode链表之分割链表
- 五分钟带你读懂 TCP全连接队列(图文并茂)
- Python基础
- JDK15正式发布,新增功能预览!
- Magicodes.IE 2.3重磅发布——.NET Core开源导入导出库
- 安防视频监控系统视频上云解决方案EasyCVR音频基础知识介绍