展开全部
我之前写过一个 jQuery 小插件：jQuery Ruler，用来测量任意网站元素的尺寸和坐标。
刚才整理了一下，顺便把你需要的代码用原生 Javascript 写出来了。
没有什么实际用途，只是实现绘制矩形和拖拽功能。
jQuery Ruler 写在空间，有演示，有兴趣可以看一下。
hi.baidu.com/keneks/item/04dbaf39d226e8f1e7bb7ab8
<!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>
更多追问追答
追问
还要能够改变矩形大小，怎么实现呢？ 先谢谢以上的回答了，非常好，如果你能再补充，我会追加财富值的
追答
你开始没要求，我就没写。
代码改了，和以前差别较大，继续回答没有高亮显示，我写在空间了。
加上了调整大小，还加了双击移除。
注意如果鼠标移动过快可能会出现错误。所以这种程序最好使用 jQuery 这样的JS库，减少不兼容的可能性。
hi.baidu.com/keneks/item/e6a1b4f261c743ec1b111f4b
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
绘制矩形：鼠标按下时得到起点，鼠标放开时得到终点，得到两个点之后计算点的关系然后绘制矩形，矩形可以用div来模拟，也就是鼠标放开之后创建一个div放到页面上，这样矩形就画好了；让矩形可以拖动那就是给div绑定相应的拖动函数即可。基本上就是这样了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
