javascript 绘制矩形框

更新时间：2009年04月24日 01:24:04 作者：

今天读John Resig的Pro Javascript Techniques时候看到他书上给的一个关于drag and drop的例子，我做的第二件事就是js模拟用鼠标拖出矩形框，代码很简单

如果不考虑把整个代码封装起来，大约5分钟里也可以写出类似的效果，为了把整个代码封装成一个对象，稍微借鉴了Pro Javascript Techniques书中的代例子的风格。
Pro Javascript Techniques书中推荐的drag and drop 例子：http://boring.youngpup.net/2001/domdrag

<html> <head> <title>Rect</title> <style type="text/css"> </style> <script type="text/javascript"> var Rect = {                 //当前正在画的矩形对象 obj: null, //画布 container: null, //初始化函数 init: function(containerId){ Rect.container = document.getElementById(containerId); if(Rect.container){                 //鼠标按下时开始画 Rect.container.onmousedown = Rect.start; } else{ alert('You should specify a valid container!'); } }, start: function(e){ var o = Rect.obj = document.createElement('div'); o.style.position = "absolute"; // mouseBeginX，mouseBeginY是辅助变量，记录下鼠标按下时的位置 o.style.left = o.mouseBeginX = Rect.getEvent(e).x; o.style.top = o.mouseBeginY = Rect.getEvent(e).y; o.style.height = 0; o.style.width = 0; o.style.border = "dotted black 1px"; //向o添加一个叉叉，点击叉叉可以删除这个矩形 var deleteLink = document.createElement('a'); deleteLink.href="#"; deleteLink.onclick = function(){         Rect.container.removeChild(this.parentNode);         //this.parentNode.style.display = "none";         //alert(this.tagName); } deleteLink.innerText = "x"; o.appendChild(deleteLink); //把当前画出的对象加入到画布中 Rect.container.appendChild(o); //处理onmousemove事件 Rect.container.onmousemove = Rect.move; //处理onmouseup事件 Rect.container.onmouseup = Rect.end; }, move: function(e){ var o = Rect.obj; //dx，dy是鼠标移动的距离 var dx = Rect.getEvent(e).x - o.mouseBeginX; var dy = Rect.getEvent(e).y - o.mouseBeginY; //如果dx，dy <0,说明鼠标朝左上角移动，需要做特别的处理 if(dx<0){ o.style.left = Rect.getEvent(e).x; } if(dy<0){ o.style.top = Rect.getEvent(e).y; } o.style.height = Math.abs(dy); o.style.width = Math.abs(dx); }, end: function(e){                 //onmouseup时释放onmousemove，onmouseup事件句柄 Rect.container.onmousemove = null; Rect.container.onmouseup = null; Rect.obj = null; }, //辅助方法，处理IE和FF不同的事件模型 getEvent: function(e){                                         if (typeof e == 'undefined'){                                                 e = window.event;                                         }                                         //alert(e.x?e.x : e.layerX);                                         if(typeof e.x == 'undefined'){                                                 e.x = e.layerX;                                         }                                         if(typeof e.y == 'undefined'){                                                 e.y = e.layerY;                                         }                                         return e;                                 } };         </script> </head> <body> <div id="main" style="border: solid red 1px; height:90%; width:60%; curssor: default;"></div> 增加一个按钮，可以关闭绘画效果，用来配合测试删除功能 <input type="button" value="停止绘画" id="t"/> </body> <script type="text/javascript"> //测试代码开始 //初始化 Rect.init("main"); document.getElementById('t').onclick = function(){         Rect.container.onmousedown = null; };         </script> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript实现通过select标签跳转网页的方法
这篇文章主要介绍了JavaScript实现通过select标签跳转网页的方法,涉及javascript事件响应及窗口操作相关技巧,需要的朋友可以参考下
2016-09-09
JS实现深度优先搜索求解两点间最短路径
这篇文章主要为大家详细介绍了JS实现深度优先搜索求解两点间最短路径，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-01-01
使用js实现复制功能
这篇文章主要为大家详细介绍了使用js实现复制功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
返回函数的JavaScript函数
理解返回函数的JavaScript函数是什么意思，通过几个简短的例子真正理解返回函数的JavaScript函数到底是什么？感兴趣的小伙伴们可以参考一下
2016-06-06
javascript复制粘贴与clipboardData的使用
window.clipboardData可以实现复制与粘贴的操作，下面有个小示例，想学习的朋友可以参考下
2014-10-10
判断ie的两种简单方法
判断ie想必大家都会写吧，如何将判断条件变得简单呢，也许大家并不是很清楚，感兴趣的大家可以参考下本文，或许会有所收获
2013-08-08
关于JS判断图片是否加载完成且获取图片宽度的方法
本篇文章小编为大家介绍，关于JS判断图片是否加载完成且获取图片宽度的方法，有需要的朋友可以参考一下
2013-04-04
判断控件是否已加载完成的代码
判断一个控件是否已加载完成其实很简单，就是利用浏览器的解析顺序。通俗的说，代码的位置越靠前，就越先加载。
2010-02-02
原生js实现购物车功能
这篇文章主要为大家详细介绍了原生js实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JS基于面向对象实现的拖拽库实例
这篇文章主要介绍了JS基于面向对象实现的拖拽库,以实例形式分析了JavaScript设置水平、垂直拖拽及限制拖拽范围的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09