看到云盘里,使用js实现鼠标拉框 选中多个,来个效果图
实现如下:
var SelectPlugin = function(c, r){
// 是否需要(允许)处理鼠标的移动事件,默认识不处理
var select = false;
var rect = document.getElementById(r);
// 设置默认值,目的是隐藏图层
rect.style.width = 0;
rect.style.height = 0;
rect.style.visibility = 'hidden';
//让你要画的图层位于最上层
rect.style.zIndex = 1000;
// 记录鼠标按下时的坐标
var downX = 0;
var downY = 0;
// 记录鼠标抬起时候的坐标
var mouseX2=downX;
var mouseY2=downY;
this.init = function(){
/*
这两句代码是最重要的时候,没有这两句代码,你的拉框,就只能拉框,在鼠标松开的时候,
拉框停止,但是不能相应鼠标的mouseup事件.那么你想做的处理就不能进行.
这两句的作用是使当前的鼠标事件不在冒泡,也就是说,不向其父窗口传递,所以才可以相应鼠标抬起事件,
这个部分我也理解的不是特别的清楚,如果你需要的话,你可以查资料.但是这两句话确实最核心的部分,
为了这两句话,为了实现鼠标拉框,我搞了几天的时间.
*/
window.event.cancelBubble = true;
window.event.returnValue = false;
}
//处理鼠标按下事件
this.down = function(event){
// 鼠标按下时才允许处理鼠标的移动事件
select = true;
//让你要画框的那个图层显示出来
//rect.style.visibility = 'visible';
// 取得鼠标按下时的坐标位置
downX = event.clientX;
downY = event.clientY;
//设置你要画的矩形框的起点位置
rect.style.left = downX;
rect.style.top = downY;
}
//鼠标移动事件,最主要的事件
this.move = function (event){
// 取得鼠标移动时的坐标位置
mouseX2 = event.clientX;
mouseY2 = event.clientY;
// 设置拉框的大小
rect.style.width = Math.abs( mouseX2 - downX );
rect.style.height = Math.abs( mouseY2 - downY );
/*
这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.
*/
if(select){
rect.style.visibility = 'visible';
// A part
if( mouseX2 < downX && mouseY2 < downY ){
rect.style.left = mouseX2;
rect.style.top = mouseY2 ;
}
// B part
if( mouseX2 > downX && mouseY2 < downY){
rect.style.left = downX ;
rect.style.top = mouseY2;
}
// C part
if( mouseX2 < downX && mouseY2 > downY){
rect.style.left = mouseX2;
rect.style.top = downY ;
}
// D part
if( mouseX2 > downX && mouseY2 > downY ){
rect.style.left = downX ;
rect.style.top = downY;
}
return get_select_list();
}
}
//鼠标抬起事件
this.up = function(event){
//鼠标抬起,就不允许在处理鼠标移动事件
select = false;
//隐藏图层
rect.style.visibility = 'hidden';
return get_select_list()
}
function get_select_list(){
var objs_id_list = [];
var temp = document.getElementById(c).childNodes;
for(var i=0; i<temp.length; i++){
if(temp[i].nodeType == 1 && temp[i].id && temp[i].id != r){
objs_id_list.push(temp[i].id);
}
}
console.log(objs_id_list)
var r1= getRectangle(r);
var sel_list = [];
for(i in objs_id_list){
var id = objs_id_list[i];
var r2 = getRectangle(id);
if(crossRect(r1,r2)){
sel_list.push(id);
}
}
console.log(sel_list);
return sel_list;
}
function getRectangle(id){
var obj = document.getElementById(id);
var rectangle = new Object();
rectangle.x = obj.offsetLeft;
rectangle.y = obj.offsetTop;
rectangle.width = parseInt(obj.style.width);
rectangle.height = parseInt(obj.style.height);
return rectangle;
}
function crossRect(r1,r2){
var nMaxLeft = 0;
var nMaxTop = 0;
var nMinRight = 0;
var nMinBottom = 0;
//计算两矩形可能的相交矩形的边界
nMaxLeft = r1.x >= r2.x ? r1.x : r2.x;
nMaxTop = r1.y >= r2.y ? r1.y : r2.y;
nMinRight = (r1.x + r1.width) <= (r2.x + r2.width) ? (r1.x + r1.width) : (r2.x + r2.width);
nMinBottom = (r1.y + r1.height) <= (r2.y + r2.height) ? (r1.y + r1.height) : (r2.y + r2.height);
// 判断是否相交
if (nMaxLeft > nMinRight || nMaxTop > nMinBottom){
return false;
}else{
return true;
}
}
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<title>拉框</title>
<style>
#lay1 {
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
#rect{
position:absolute;
border: 2px dashed rgb(141, 141, 141);
background-color: black;
opacity: .1;
filter: alpha(opacity=10);
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=10)';
}
</style>
</head>
<body>
<div id='lay1'
οnmοusedοwn='down(event)'
οnmοuseup='up(event)'
οnmοusemοve='move(event)'
style='width:400px;height:400px;visibility:visible;border:solid 1px blue;margin-top:100px;'
>
<button id="btn" style="margin:50px;height:20px;width:50px">dsdsd</button>
<button id="btn1" style="margin:50px;height:20px;width:50px">dsdsd</button>
<button id="btn2" style="margin:50px;height:20px;width:50px">dsdsd</button>
<button id="btn3" style="margin:50px;height:20px;width:50px">dsdsd</button>
<button id="btn4" style="margin:50px;height:20px;width:50px">dsdsd</button>
<button id="btn5" style="margin:50px;height:20px;width:50px">dsdsd</button>
<div id='rect'
style=''
></div>
</div>
<script language="javascript" src="rect_select.js"></script>
<script language="javascript">
var select_list;
var select_plug = new SelectPlugin("lay1", "rect");
select_plug.init();
function down(event){
select_plug.down(event);
}
function move(event){
select_plug.move(event);
}
function up(event){
select_list = select_plug.up(event);
}
</script>
</body>
</html>