JavaScript拖动鼠标绘制矩形方框

快乐打工仔 分类:实例代码

JavaScript拖动鼠标绘制矩形方框属于前端实例代码,有关更多实例代码大家可以查看

本章节分享一段代码实例,它实现了拖动鼠标实现绘制方框效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#rectBox{
background:#CCFFFF;
border:2px solid #0099FF;
filter:alpha(opacity=30);
opacity:0.3;
position:absolute;
}
</style>
<script type="text/javascript">
function Rect(){
this.doc = document.documentElement;
if(!this.doc) return;
this.startX = '';
this.startY = '';
rectSelf = this;
}
Rect.prototype.down = function(e){
var e = e?e:window.event;
rectSelf.startX = e.pageX?e.pageX:e.clientX + document.documentElement.scrollLeft || document.body.scrollLeft;
rectSelf.startY = e.pageY?e.pageY:e.clientY + document.documentElement.scrollTop+document.body.scrollTop;
rectSelf.showRect(true);
}
Rect.prototype.up = function(e){
rectSelf.rectBox.style.width = '0px';
rectSelf.rectBox.style.height = '0px';
rectSelf.showRect(false);
}
Rect.prototype.move = function(e){
if(rectSelf.rectBox){
var currentX = e.pageX?e.pageX:e.clientX + document.documentElement.scrollLeft;
var currentY = e.pageY?e.pageY:e.clientY + document.documentElement.scrollTop;
rectSelf.rectBox.style.width = Math.abs(currentX - rectSelf.startX) + 'px';
rectSelf.rectBox.style.height = Math.abs(currentY - rectSelf.startY) + 'px';
if(currentX - rectSelf.startX < 0){
rectSelf.rectBox.style.left = currentX + 'px';
}
if(currentY - rectSelf.startY < 0){
rectSelf.rectBox.style.top = currentY + 'px';
}
}
}
Rect.prototype.showRect = function(bool){
if(bool){
if(!this.rectBox){
this.rectBox = document.createElement("div");
this.rectBox.id = "rectBox";
document.body.appendChild(this.rectBox);
}
this.rectBox.style.display = "block";
this.rectBox.style.left = this.startX + 'px';
this.rectBox.style.top = this.startY + 'px'; 
this.addEventListener(this.doc , 'mousemove' , this.move);
}
else{
if(this.rectBox){
this.rectBox.style.display = "none";
}
this.removeEventListener(this.doc , 'mousemove' , this.move);
}
}
Rect.prototype.addEventListener = function(o,e,l){
if(o.addEventListener){
o.addEventListener(e,l,false);
} 
else if (o.attachEvent) {
o.attachEvent('on'+e,function() {
l(window.event);
});
}
}
Rect.prototype.removeEventListener = function(o,e,l){
if (o.removeEventListener) {
o.removeEventListener(e,l,false);
} 
else if (o.detachEvent) {
o.detachEvent('on'+e,function() {
l(window.event);
});
}
}
window.onload = function(){
var oRect = new Rect();
oRect.addEventListener(oRect.doc , 'mousedown' , oRect.down);
oRect.addEventListener(oRect.doc , 'mouseup' , oRect.up);
}
</script>
</head>
<body>
<h1>拖动鼠标测试效果</h1>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).function Rect(){},定义一个构造函数。

(2).this.doc = document.documentElement,将document.documentElement赋值给this.doc。

(3).if(!this.doc) return,如果不存在,那么就直接跳出。

(4).this.startX = '',声明一个变量,它用来存储拖动开始的鼠标横向坐标。

(5).this.startY = '',声明一个变量,它用来存储推动开始的鼠标纵向坐标。

(6).rectSelf = this,将this赋值给变量。

(7).Rect.prototype.down = function(e){},这个就是mousedown事件处理函数。

(8).var e = e?e:window.event,获取兼容所有浏览器的事件对象。

(9).rectSelf.startX = e.pageX?e.pageX:e.clientX + document.body.scrollLeft,获取鼠标指针在文档中的水平坐标,这里是采用了兼容性的写法,因为低版本IE浏览器并不支持e.pageX。

(10).rectSelf.startY = e.pageY?e.pageY:e.clientY + document.body.scrollTop,获取鼠标指针在文档中的垂直坐标,原理同上。

(11).rectSelf.showRect(true),此方法用来开始对绘制做一些基本工作,参数是一个布尔值,用来表示要进行绘制还是结束绘制。

(12).Rect.prototype.up = function(e){},mouseup事件处理函数。

(13).rectSelf.rectBox.style.width = '0px',设置矩形div的宽度为0。

(14).rectSelf.rectBox.style.height = '0px',设置矩形div的高度为0。

(15).rectSelf.showRect(false),取消绘制,也就是矩形元素消失。

(16).Rect.prototype.move = function(e){},mousemove时间处理函数。

(17).if(rectSelf.rectBox){},如果矩形div元素已经创建。

(18).var currentX = e.pageX?e.pageX:e.clientX + document.body.scrollLeft,获取鼠标当前在文档中的横向坐标。(19).var currentY = e.pageY?e.pageY:e.clientY + document.body.scrollTop,获取鼠标当前在文档中的纵向坐标。

(20).rectSelf.rectBox.style.width = Math.abs(currentX - rectSelf.startX) + 'px',设置矩形的宽度,之所以用绝对值方法,是因为现在还不清楚currentX和rectSelf.startX的大小。

(21).rectSelf.rectBox.style.height = Math.abs(currentY - rectSelf.startY) + 'px',设置矩形的高度,和上面同样道理。

(22).if(currentX - rectSelf.startX < 0){

  rectSelf.rectBox.style.left = currentX + 'px';

},如果小于0,也就是向左拖动,就设置元素的left值为当前鼠标的横向坐标。

(22).if(currentY - rectSelf.startY < 0){

  rectSelf.rectBox.style.top = currentY + 'px';

},和上面是同样的道理。

(23).Rect.prototype.showRect = function(bool){},此方法可以进行创建的准备工作,参数是一个布尔值,如果为true表示将要创建,然后进行准备工作,否则就要取消已经创建的div矩形元素。

(24).if(bool){

  if(!this.rectBox){

    this.rectBox = document.createElement("div");

    this.rectBox.id = "rectBox";

    document.body.appendChild(this.rectBox);

  }

    this.rectBox.style.display = "block";

    this.rectBox.style.left = this.startX + 'px';

    this.rectBox.style.top = this.startY + 'px'; 

    this.addEventListener(this.doc , 'mousemove' , this.move);

  },创建div元素,并且附加到body中

然胡设置元素的left和top值,然后注册mousemove事件处理函数。

二.相关阅读:

(1).构造函数可以参阅javascript构造函数一章节。

(2).var e = e?e:window.event参阅var ev=window.event||ev的作用是什么一章节。

(3).e.pageX参阅jQuery event.pageX一章节。

(4).e.clientX参阅javascript clientX一章节。

(5).Math.abs()参阅javascript Math.abs()一章节。

(6).document.createElement()参阅document.createElement()一章节。

(7).appendChild()参阅js appendChild()一章节。

(8).prototype参阅javascript prototype原型一章节。

(9).addEventListener()参阅javascript addEventListener()一章节。

(10).attachEvent()参阅javascript attachEvent()一章节。

(11).removeEventListener()参阅removeEventListener()方法和detachEvent()方法用法一章节。

JavaScript拖动鼠标绘制矩形方框,这样的场景在实际项目中还是用的比较多的,关于JavaScript拖动鼠标绘制矩形方框就介绍到这了。

回复

我来回复
  • 暂无回复内容