js 鼠标画图

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;width: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>