<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
height:100px;
width:100px;
position:absolute;
background:red;
top:200px;
left:400px;
}
#div2{
height:100px;
width:100px;
position:absolute;
background:pink;
z-index:2;
text-align:center;
line-height:100px;
color:#fff;
}
</style>
<script>
window.onload = function ()
{
var odiv1 = document.getElementById('div1');
var odiv2 = document.getElementById('div2');
odiv2.onmousedown = function(ev)
{
var ev = ev || event;
var dix = ev.clientX - this.offsetLeft;
var diy = ev.clientY - this.offsetTop;
document.onmousemove = function (ev)
{
var T = ev.clientY - diy;
var L = ev.clientX - dix;
if(T < 0)
{
T = 0;
}else if( T > document.documentElement.clientHeight - odiv2.offsetHeight)
{
T = document.documentElement.clientHeight - odiv2.offsetHeight;
}
if(L < 0)
{
L = 0;
}else if( L > document.documentElement.clientWidth - odiv2.offsetWidth)
{
L = document.documentElement.clientWidth - odiv2.offsetWidth;
}
odiv2.style.top = T + 'px';
odiv2.style.left = L + 'px';
document.title = T + ':' + odiv1.offsetTop + '||' + L + ':' + odiv2.offsetLeft;
if(T == odiv1.offsetTop && L == odiv1.offsetLeft)
{
alert('我们重合了')
document.onmousemove = document.onmousedown = null;
if(odiv2.releaseCapture)
{
odiv2.releaseCapture();
}
}
};
document.onmouseup = function ()
{
document.onmousemove = document.onmousedown = null;
if(odiv2.releaseCapture)
{
odiv2.releaseCapture();
}
};
return false;
}
};
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2">让我们重合</div>
</body>
</html>
