JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)（2）
程序员文章站
2022-06-20 10:34:43
限制范围的拖拽，要求被拖拽的对象必须在客户区可见范围！
div是body的子元素，div的left/top是针对body的，不是针对可见客户区的，所以在拖拽的过程中...
限制范围的拖拽，要求被拖拽的对象必须在客户区可见范围！
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。