<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div2 {
width: 150px;
height: 150px;
position: absolute;
background: #CCCCCC;
}
</style>
<script>
window.onload = function() {
var div2 = document.getElementById('div2');
var x = 0;
var y = 0;
div2.onmousedown = function(ev) {
var oEvent = ev || event;
//x、y分别代表，鼠标与div之间的横坐标和纵坐标
x = oEvent.clientX - div2.offsetLeft;
y = oEvent.clientY - div2.offsetTop;
//判断是否是IE，因为setcapture只在IE下起作用
if(div2.setCapture) {
div2.onmousemove = move;
div2.onmouseup = up;
//鼠标捕获到div2（只适用于IE）
div2.setCapture();
return false;
} else {
document.onmousemove = move;
document.onmouseup = up;
}
//mouseMove函数
function move(ev) {
var oEvent = ev || event;
//m、n分别代表div的横、纵坐标
var m = oEvent.clientX - x;
var n = oEvent.clientY - y;
//当左边小于50，就让m=0，形成磁性吸附的现象
if(m < 0) {
m = 0;
} else if(m > (document.documentElement.clientWidth - div2.offsetWidth)) {
m = document.documentElement.clientWidth - div2.offsetWidth;
}
if(n < 0) {
n = 0;
} else if(n > (document.documentElement.clientHeight - div2.offsetHeight)) {
n = document.documentElement.clientHeight - div2.offsetHeight;
}
//设置div的坐标
div2.style.left = m + 'px';
div2.style.top = n + 'px';
};
//mouseUp函数
function up(ev) {
var oEvent = ev || event;
//释放move事件，如果不释放，放开鼠标后，div仍然会跟随鼠标移动
this.onmousemove = null;
this.onmouseup = null;
//释放捕获（只适用于IE）
if(div2.releaseCapture) {
div2.releaseCapture();
}
}
};
};
</script>
</head>
<body>
Hello Ketty<br />
Hello Ketty<br />
Hello Ketty<br />
Hello Ketty<br />
Hello Ketty<br />
Hello Ketty<br />
Hello Ketty<br />
Hello Ketty<br />
Hello Ketty<br />
<div id="div2">
Hello Ketty
</div>
</body>
</html>
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
