首页 > 网络编程 > JavaScript > javascript技巧 > js 选区实现

js模拟电脑选择多文件夹效果_选区代码

2008-09-21 21:27:39 作者：

模仿选择文件夹效果的javascript封装类，效果不错，实际应用呢，暂时用不到，大家可以学习思路

代码很简单，会继续完善。。。
按住鼠标键不动，拖动鼠标，会看到效果

<html> 
    <head></head> 
    <style> 
        body{padding:100px;} 
        .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;} 
        .seled{border:1px solid #ff0000;background-color:#D6DFF7;}     
    </style> 
    <script type="text/javascript"> 
                 (function(){ 
                      document.onmousedown = function(){ 
                           
                           var selList = []; 
var fileNodes = document.getElementsByTagName("div"); 
                           for(var i=0; i < fileNodes.length; i++){ 
                                if(fileNodes[i].className.indexOf("fileDiv")!=-1){ 
                                     fileNodes[i].className = "fileDiv"; 
                                     selList.push(fileNodes[i]); 
                                } 
                               } 
                      
                           
                           var isSelect = true; 
                           var evt = window.event || arguments[0]; 
                           var startX = (evt.x || evt.clientX); 
                           var startY = (evt.y || evt.clientY); 
                            var selDiv = document.createElement("div"); 
                                   selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;"; 
                                   selDiv.id = "selectDiv"; 
                                   document.body.appendChild(selDiv); 
                                    
                                   selDiv.style.left = startX +"px"; 
                                   selDiv.style.top = startY +"px"; 
                                    
                            var _x = null; 
                            var _y = null; 
                            clearEventBubble(evt); 
                             
                           document.onmousemove = function(){ 
                                evt = window.event || arguments[0]; 
                                if(isSelect){ 
                                        if(selDiv.style.display == "none"){ selDiv.style.display = "";} 
                                    _x = (evt.x || evt.clientX); 
                                    _y = (evt.y || evt.clientY); 
                                    selDiv.style.left = Math.min(_x, startX)+"px"; 
                                       selDiv.style.top = Math.min(_y, startY) +"px"; 
                                       selDiv.style.width = Math.abs(_x - startX) +"px"; 
                                       selDiv.style.height = Math.abs(_y - startY)+"px"; 
                                        
                                       // ---------------- 关键算法 --------------------- 
                                           var _l = selDiv.offsetLeft, _t = selDiv.offsetTop; 
                                         var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight; 
                                        for(var i=0; i< selList.length; i++){ 
                                             var sl = selList[i].offsetWidth + selList[i].offsetLeft; 
                                         var st = selList[i].offsetHeight + selList[i].offsetTop; 
                                            if(sl > _l && st > _t && selList[i].offsetLeft < _l+_w && selList[i].offsetTop < _t + _h){ 
                                                if(selList[i].className.indexOf("seled") == -1){ 
                                                        selList[i].className = selList[i].className +" seled"; 
                                                } 
                                            }else{ 
                                                    if(selList[i].className.indexOf("seled") != -1){ 
                                                        selList[i].className = "fileDiv"; 
                                                 } 
                                            } 
                                        } 
                                        
                                        
                               } 
                               clearEventBubble(evt); 
                           } 
                           
                           document.onmouseup = function(){ 
                                isSelect = false; 
                                if(selDiv){ 
                                document.body.removeChild(selDiv);     
                                showSelDiv(selList); 
                                } 
                                selList = null,_x = null,_y = null,selDiv = null,startX = null,startY = null, evt = null; 
                           } 
                           
                           
                      } 
                          
                 })(); 
    function clearEventBubble(evt){ 
     if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true; 
if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; 
    } 
//www.jb51.net 脚本之家   
    function showSelDiv(arr){ 
         var count =0; 
         var selInfo = ""; 
         for(var i=0; i<arr.length;i++){ 
              if(arr[i].className.indexOf("seled")!=-1){ 
                   count ++; 
                   selInfo += arr[i].innerHTML+"\n"; 
              }     
         } 
         alert("脚本之家共选择 "+count+" 个文件，分别是：\n"+selInfo); 
         
    } 
     
        </script>     
    <body> 
         <div class="fileDiv">file1</div> 
         <div class="fileDiv">file2</div> 
         <div class="fileDiv">file3</div> 
         <div class="fileDiv">file4</div> 
         <div class="fileDiv">file5</div> 
         <div class="fileDiv">file6</div> 
         <div class="fileDiv">file7</div> 
         <div class="fileDiv">file8</div> 
         <div class="fileDiv">file9</div> 
     
    </body>     
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

update:
1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ，
2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）；
3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。
4. 增加了获取“被选区选中元素”的方法，可以点击按钮“getRegions”看效果。
调用方法：

复制代码代码如下:

new RegionSelect({ 
region:'div.fileDiv', 
selectedClass: 'seled' 
}).select();

增强效果代码

<html> 
    <head></head> 
    <style> 
        body{padding-top:50px;padding-left:100px;padding-right:150px;} 
        .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #cccccc;margin-right:10px;margin-bottom:10px;} 
        .seled{border:1px solid #ff0000;background-color:#D6DFF7;}     
    </style> 
    <script type="text/javascript"> 
/*--------------------------------- 以下4个方法 摘自网络 ----------------------------------------*/ 
Array.prototype.remove = function( item ){ 
        for( var i = 0 ; i < this.length ; i++ ){ 
            if( item == this[i] ) 
                break; 
        } 
        if( i == this.length ) 
            return; 
        for( var j = i ; j < this.length - 1 ; j++ ){ 
            this[ j ] = this[ j + 1 ]; 
        } 
        this.length--; 
     }     
     
String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return this.replace(raRegExp,ARepText);} 
     
function getAllChildren(e) { 
return e.all ? e.all : e.getElementsByTagName('*'); 
}

document.getElementsBySelector = function(selector) {

if (!document.getElementsByTagName) { 
return new Array(); 
}

var tokens = selector.split(' '); 
var currentContext = new Array(document); 
for (var i = 0; i < tokens.length; i++) { 
token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');; 
if (token.indexOf('#') > -1) {

var bits = token.split('#'); 
var tagName = bits[0]; 
var id = bits[1]; 
var element = document.getElementById(id); 
if (tagName && element.nodeName.toLowerCase() != tagName) {

return new Array(); 
} 
currentContext = new Array(element); 
continue; 
} 
if (token.indexOf('.') > -1) {

var bits = token.split('.'); 
var tagName = bits[0]; 
var className = bits[1]; 
if (!tagName) { 
tagName = '*'; 
}

/*--------------------------------------------------------------------------------------------------------*/ 
/** 
* author: 王永山 
* version: 1.1 beta 
* date: 2008-09-09 
* email: [email]wangys0927@163.com[/email] 
* 
* update: 
* 1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ， 
* 2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）； 
* 3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。 
* 4. 增加了获取“被选区选中元素”的方法，可以点击按钮“getRegions”看效果。 
*/

alert("共选择 "+arr.length+" 个文件，分别是：\n"+selInfo); 
         
    } 
     
        </script>     
    <body> 
<button onclick="showSelDiv();">getRegions</button> 
<div class="fileDiv">file1</div> 
<div class="fileDiv">file2</div> 
<div class="fileDiv">file3</div> 
<div class="fileDiv">file4</div> 
<div class="fileDiv">file5</div> 
<div class="fileDiv">file6</div> 
<div class="fileDiv">file7</div> 
<div class="fileDiv">file8</div> 
<div class="fileDiv">file9</div> 
<div class="fileDiv">file10</div> 
<div class="fileDiv">file11</div> 
<div class="fileDiv">file12</div> 
<div class="fileDiv">file13</div> 
<div class="fileDiv">file14</div> 
<div class="fileDiv">file15</div> 
<div class="fileDiv">file16</div> 
<div class="fileDiv">file17</div> 
<div class="fileDiv">file18</div> 
<div class="fileDiv">file19</div> 
<div class="fileDiv">file20</div> 
<div class="fileDiv">file21</div> 
<div class="fileDiv">file22</div> 
<div class="fileDiv">file23</div> 
<div class="fileDiv">file24</div> 
<div class="fileDiv">file25</div> 
<div class="fileDiv">file26</div> 
<div class="fileDiv">file27</div> 
<div class="fileDiv">file28</div> 
<div class="fileDiv">file29</div> 
<div class="fileDiv">file30</div> 
<div class="fileDiv">file31</div> 
<div class="fileDiv">file32</div> 
<div class="fileDiv">file33</div> 
<div class="fileDiv">file34</div> 
<div class="fileDiv">file35</div> 
<div class="fileDiv">file36</div> 
<div class="fileDiv">file37</div> 
<div class="fileDiv">file38</div> 
<div class="fileDiv">file39</div> 
<div class="fileDiv">file40</div> 
<div class="fileDiv">file41</div> 
<div class="fileDiv">file42</div> 
<div class="fileDiv">file43</div> 
<div class="fileDiv">file44</div> 
<div class="fileDiv">file45</div> 
<div class="fileDiv">file46</div> 
<div class="fileDiv">file47</div> 
<div class="fileDiv">file48</div> 
<div class="fileDiv">file49</div> 
<div class="fileDiv">file50</div> 
<div class="fileDiv">file51</div> 
<div class="fileDiv">file52</div> 
<div class="fileDiv">file53</div> 
<div class="fileDiv">file54</div> 
<div class="fileDiv">file55</div> 
<div class="fileDiv">file56</div> 
<div class="fileDiv">file57</div> 
<div class="fileDiv">file58</div> 
<div class="fileDiv">file59</div> 
<div class="fileDiv">file60</div>

<div style="float:left;width:100%;"><button onclick="showSelDiv();">getRegions</button></div> 
    </body>     
    <script> 
new RegionSelect({ 
    region:'div.fileDiv', 
    selectedClass: 'seled' 
}).select(); 
    </script> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js模拟电脑选择多文件夹效果_选区代码

您可能感兴趣的文章: