您的位置：首页 > 其它

可视区域内鼠标拖拽框

2017-03-11 17:07 155 查看

要想在通过鼠标来拖拽div，就要在鼠标点下的时刻获取光标与div的距离。然后在光标移动时设置div的left值为光标的left减去那个距离，设置div的top值为光标的top减去那个距离。但是div的left与top是相对于body（即整个页面），而光标的left与top却是相对于可视区域而言的。在没有滚动条时，两者在参考系是一样的；但是在滚动条出现以后两者的参考系就不同了。所以，有两种解决办法，要么把两者的参考系都变成body，要么把两者的参考系都变成可视区域。在这里，我采取了body作为参考系的方法。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标拖拽框</title>
<style>
body{
height:1000px;
width:1500px;
}
#box{
position: absolute;
top:0;
left:0;
background-color: red;
width:100px;
height:100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
function getPos(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return{x: scrollLeft, y: scrollTop};
}//用以获取滚动条的距离
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
var oDiv = document.getElementById('box');
var disx = 0;
var disy = 0;
oDiv.onmousedown = function(ev){
var oEvent = ev || event;
var pos = getPos();
disx = pos.x+oEvent.clientX - parseInt(getStyle(oDiv,'left'));
disy = pos.y+oEvent.clientY - parseInt(getStyle(oDiv,'top'));
document.onmousemove = function(ev){
var oEvent = ev || event;
var pos = getPos(oEvent);
var l = pos.x+oEvent.clientX - disx;
var h = pos.y+oEvent.clientY - disy;
if(l<pos.x){
l = pos.x;
}
if (l>document.documentElement.clientWidth + pos.x - parseInt(getStyle(oDiv,'width'))) {
l = document.documentElement.clientWidth + pos.x - parseInt(getStyle(oDiv,'width'));
}
if(h<pos.y){
h = pos.y;
}
if (h>document.documentElement.clientHeight + pos.y-parseInt(getStyle(oDiv,'height'))) {
h = document.documentElement.clientHeight + pos.y-parseInt(getStyle(oDiv,'height'));
}
oDiv.style.left = l + 'px';
oDiv.style.top = h + 'px';
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航