<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box { background: #f00; width: 0px; height: 0px; position: absolute; vertical-align:middle; opacity: 0.5; cursor: move; text-align:center; border-radius:50%; } </style> </head> <body> <div style="background-color:red;50px;height:50px;"></div> <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) { console.log('onmousedownE', e); startX = e.pageX; startY = e.pageY; console.log('startx', startX); console.log('startY', startY); 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; console.log('diffX', diffX); diffY = startY - e.target.offsetTop; console.log('diffY', diffY); } 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'; active_box.innerText = "x:" + startX + ",y:" + startY; 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'; active_box.style.lineHeight = 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'; mb.innerText = "x:" + mb.style.left + ",y:" + mb.style.top; } }; // 鼠标抬起 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> </body> </html>