我之前写过一个 jQuery 小插件：jQuery Ruler，用来测量任意网站元素的尺寸和坐标。
刚才整理了一下，顺便把你需要的代码用原生 Javascript 写出来了。
没有什么实际用途，只是实现绘制矩形和拖拽功能。
jQuery Ruler 写在空间，有演示，有兴趣可以看一下。
hi.baidu.com/keneks/item/04dbaf39d226e8f1e7bb7ab8
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
<!DOCTYPE html><html><head><meta charset="gb2312" /><title></title><style type="text/css">.box { background: #f00; width: 0px; height: 0px; position: absolute; opacity: 0.5; cursor: move;}</style><script type="text/javascript">window.onload = function(e) { e = e || window.event; // startX, startY 为鼠标点击时初始坐标 // diffX, diffY 为鼠标初始坐标与 box 左上角坐标之差，用于拖动 var startX, startY, diffX, diffY; // 是否拖动，初始为 false var dragging = false; // 鼠标按下 document.onmousedown = function(e) { startX = e.pageX; startY = e.pageY; // 如果鼠标在 box 上被按下 if(e.target.className.match(/box/)) { // 允许拖动 dragging = true; // 设置当前 box 的 id 为 moving_box if(document.getElementById("moving_box") !== null) { document.getElementById("moving_box").removeAttribute("id"); } e.target.id = "moving_box"; // 计算坐标差值 diffX = startX - e.target.offsetLeft; diffY = startY - e.target.offsetTop; } else { // 在页面创建 box var active_box = document.createElement("div"); active_box.id = "active_box"; active_box.className = "box"; active_box.style.top = startY + 'px'; active_box.style.left = startX + 'px'; document.body.appendChild(active_box); active_box = null; } }; // 鼠标移动 document.onmousemove = function(e) { // 更新 box 尺寸 if(document.getElementById("active_box") !== null) { var ab = document.getElementById("active_box"); ab.style.width = e.pageX - startX + 'px'; ab.style.height = e.pageY - startY + 'px'; } // 移动，更新 box 坐标 if(document.getElementById("moving_box") !== null && dragging) { var mb = document.getElementById("moving_box"); mb.style.top = e.pageY - diffY + 'px'; mb.style.left = e.pageX - diffX + 'px'; } }; // 鼠标抬起 document.onmouseup = function(e) { // 禁止拖动 dragging = false; if(document.getElementById("active_box") !== null) { var ab = document.getElementById("active_box"); ab.removeAttribute("id"); // 如果长宽均小于 3px，移除 box if(ab.offsetWidth < 3 || ab.offsetHeight < 3) { document.body.removeChild(ab); } } };};</script></head><body><p>点击鼠标左键并拖动绘制矩形</p></body></html>