鼠标事件-拖拽3（磁性吸附）

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
#div2 {
150px;
height: 150px;
position: absolute;
background: #CCCCCC;
}

#div3 {
600px;
height: 500px;
position: absolute;
background: #2A6496;
}
</style>
<script>
window.onload = function() {
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
var x = 0;
var y = 0;

document.onmousedown = function(ev) {
var oEvent = ev || event;

//x、y分别代表，鼠标与div之间的横坐标和纵坐标
x = oEvent.clientX - div2.offsetLeft;
y = oEvent.clientY - div2.offsetTop;

document.onmousemove = function(ev) {
var oEvent = ev || event;

//m、n分别代表div的横、纵坐标
var m = oEvent.clientX - x;
var n = oEvent.clientY - y;

//当左边小于50，就让m=0，形成磁性吸附的现象
if(m < 50) {
m = 0;
} else if(m > (div3.offsetWidth - div2.offsetWidth - 50)) {
m = div3.offsetWidth - div2.offsetWidth;
}

if(n < 50) {
n = 0;
} else if(n > (div3.offsetHeight - div2.offsetHeight - 50)) {
n = div3.offsetHeight - div2.offsetHeight;
}

//设置div的坐标
div2.style.left = m + 'px';
div2.style.top = n + 'px';

};

document.onmouseup = function(ev) {
var oEvent = ev || event;

//释放move事件，如果不释放，放开鼠标后，div仍然会跟随鼠标移动
document.onmousemove = null;
document.onmouseup = null;
};
};

};
</script>
</head>

</body>

</html>