<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> #main div { position: absolute; width: 220px; height: 150px; border: 1px solid #999; } </style> <script type="text/javascript"> var a; document.onmouseup = function () { if (!a)return; document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); a = ""; }; document.onmousemove = function (d) { if (!a)return; if (!d)d = event; a.style.left = (d.clientX - b) + "px"; a.style.top = (d.clientY - c) + "px"; }; function $(o, e) { a = o; // console.log(a.setCapture) b = e.clientX - parseInt(a.style.left); c = e.clientY - parseInt(a.style.top); document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE); } </script> </head> <body> <div id="main"> <div style="left:100px;top:100px;background:#fc9;" onmousedown="$(this,event)">1</div> <!--<div style="left:400px;top:100px;background:#9cf;" onmousedown="$(this,event)">2</div>--> <!--<div style="left:700px;top:100px;background:#f9c;" onmousedown="$(this,event)">3</div>--> <!--<div style="left:100px;top:300px;background:#9fc;" onmousedown="$(this,event)">4</div>--> <!--<div style="left:400px;top:300px;background:#c9f;" onmousedown="$(this,event)">5</div>--> <!--<div style="left:700px;top:300px;background:#cf9;" onmousedown="$(this,event)">6</div>--> </div> </body> </html>
原文：http://www.cnblogs.com/yudishow/p/4289696.html