思路
我是这样理解的，鼠标移动后让盒子绝对定位，然后给top值和left值。
top值：鼠标距离窗口顶部的距离 减去 鼠标距离盒子上边的距离
left值：鼠标距离窗口左边的距离 减去 鼠标距离盒子左边的距离
然后是限制盒子的活动范围，不让其超出可视区域也就是窗口，原理是用窗口的可视宽度和高度减去盒子的宽高可得出盒子的最大移动范围，之后就是top值与left值不能小于0和超出这个移动范围。
最后，当鼠标松开后清除移动的函数。
代码如下
HTML与CSS
<body>
<div class="box"></div>
</body>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.box{
width:150px;
height:150px;
background-color:red;
position:fixed;
cursor:move;
}
</style>
效果图
JS部分
event对象：获取鼠标的位置，clientX和clientY
<script type="text/javascript">
box.function(e){
var e = e || event; //获取event对象
var X= e.clientX-box.offsetLeft; // 计算鼠标按下的时候到盒子的边界左边界距离；
var Y =e.clientY-box.offsetTop;// 计算鼠标按下的时候到盒子的边界上边界距离；
document.function(e){
var e = e || event;
var moveX= e.clientX-X; // 计算盒子被移动后到浏览器左边界的距离
var moveY = e.clientY-Y; // 计算盒子被移动后到浏览器上边界的距离
var winX = document.documentElement.clientWidth; //窗口可见的宽
var winY = document.documentElement.clientHeight; // 窗口可见的高；
var maxW = winX-box.offsetWidth; //计算出盒子可移动的最大宽度
var maxH = winY-box.offsetHeight; //计算出盒子可移动的最大高度
if(moveX<0){
moveX=0;
}
if(moveY<0){
moveY=0;
}
if(moveX>maxW){
moveX= maxW
}
if(moveY>maxH){
moveY=maxH
}
box.style.left = moveX+"px"; //盒子被移动后左边界的距离
box.style.top = moveY+"px"; //盒子被移动后上边界的距离
}
}
document.function(){
document.onmousemove = null; //清空被移动的函数
}
</script>
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
