<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ height:100px; 100px; position:absolute; background:red; top:200px; left:400px; } #div2{ height:100px; 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>