js 拉框选中多个元素

看到云盘里，使用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>