JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）
更新时间：2017年05月17日 14:59:47 作者：GY_U_YG
这篇文章主要介绍了JavaScript限制在客户区可见范围的拖拽，解决scrollLeft和scrollTop的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
限制范围的拖拽，要求被拖拽的对象必须在客户区可见范围！
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章给大家介绍js判断网页是关闭还是刷新，实现原理就是通过离开页面行为时间onunload触发时间去检测此时的浏览器的窗口大小，根据大小由此判断用户是刷新，跳转或是关闭行为程序，需要的朋友可以参考下本文2015-09-09
基于BootStrap与jQuery.validate实现表单提交校验功能
学习前台后台最开始接触的业务都是用户注册和登录,下面通过本文给大家介绍BootStrap与jQuery.validate实现表单提交校验功能，感兴趣的朋友一起学习吧2016-12-12
这篇文章主要为大家介绍了javascript中的MVC模式，MVC是一种软件架构模式，一般把软件模式分为三部分，本文就针对MVC模式的三部分进行讲解，感兴趣的小伙伴们可以参考一下2016-01-01
本篇文章是对使用js实现遮罩以及弹出可移动登录窗口的实现方法进行了详细的分析介绍，需要的朋友参考下2013-07-07
继承是面向对象编程中的一个重要概念,它允许一个对象（子类或派生类）获取另一个对象（父类或基类）的属性和方法,在 JavaScript 中,有多种方式可以实现继承,本文将给大家介绍六种常见的JavaScript继承方法,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了webpack4 处理CSS的方法示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合，需要的朋友可以参考下。2011-03-03
这篇文章主要为大家介绍了如何利用JavaScript实现四个常用的排序：插入排序、交换排序、选择排序和归并排序，文中利用动图详细介绍了实现过程，需要的可以参考一下2022-02-02
代码整体结构是执行速度的决定因素之一，代码量少不一定运行速度快，代码量多也不一定运行速度慢。本篇文章将对js的算法和流程控制进行介绍，下面跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了详解CommonJS和ES6模块循环加载处理的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论