js模擬電腦選擇多文件夾效果_選區(qū)代碼

更新時間：2008年09月21日 21:27:39 作者：

模仿選擇文件夾效果的javascript封裝類，效果不錯，實際應用呢，暫時用不到，大家可以學習思路

代碼很簡單，會繼續(xù)完善。。。
按住鼠標鍵不動，拖動鼠標，會看到效果

<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.dhdzp.com 腳本之家       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   id="w6wueyi"   class="fileDiv">file1</div>          <div   id="4gcaqo6"   class="fileDiv">file2</div>          <div   id="mk24kkk"   class="fileDiv">file3</div>          <div   id="yeo22m2"   class="fileDiv">file4</div>          <div   id="qoui2se"   class="fileDiv">file5</div>          <div   id="wa2eomi"   class="fileDiv">file6</div>          <div   id="uygc22w"   class="fileDiv">file7</div>          <div   id="e4muk2c"   class="fileDiv">file8</div>          <div   id="yqkgs02"   class="fileDiv">file9</div>          </body>     </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

update:
1. 針對前2個beta版，該版本修復了前兩個版本出現(xiàn)的 bug ，
2. 進行了代碼的簡單封裝（由于本人初學js，對js掌握的很淺，因此面向對象的理解很差，封裝的不好）；
3. 增加了對 Ctrl 和 Shift 鍵的支持(目前shift鍵的功能和ctrl鍵的功能一樣，還不能達到仿windows的選區(qū)Shift鍵的功能)。
4. 增加了獲取“被選區(qū)選中元素”的方法，可以點擊按鈕“getRegions”看效果。
調(diào)用方法：

復制代碼代碼如下:

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個方法 摘自網(wǎng)絡 ----------------------------------------*/ 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 = '*'; } var found = new Array; var foundCount = 0; for (var h = 0; h < currentContext.length; h++) { var elements; if (tagName == '*') { elements = getAllChildren(currentContext[h]); } else { elements = currentContext[h].getElementsByTagName(tagName); } for (var j = 0; j < elements.length; j++) { found[foundCount++] = elements[j]; } } currentContext = new Array; var currentContextIndex = 0; for (var k = 0; k < found.length; k++) { if (found[k].className && found[k].className.match(new RegExp('\\b'+className+'\\b'))) { currentContext[currentContextIndex++] = found[k]; } } continue; } if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)) { var tagName = RegExp.$1; var attrName = RegExp.$2; var attrOperator = RegExp.$3; var attrValue = RegExp.$4; if (!tagName) { tagName = '*'; } var found = new Array; var foundCount = 0; for (var h = 0; h < currentContext.length; h++) { var elements; if (tagName == '*') { elements = getAllChildren(currentContext[h]); } else { elements = currentContext[h].getElementsByTagName(tagName); } for (var j = 0; j < elements.length; j++) { found[foundCount++] = elements[j]; } } currentContext = new Array; var currentContextIndex = 0; var checkFunction; switch (attrOperator) { case '=': checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); }; break; case '~': checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b'+attrValue+'\\b'))); }; break; case '|': checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); }; break; case '^': checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); }; break; case '$': checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); }; break; case '*': checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); }; break; default : checkFunction = function(e) { return e.getAttribute(attrName); }; } currentContext = new Array; var currentContextIndex = 0; for (var k = 0; k < found.length; k++) { if (checkFunction(found[k])) { currentContext[currentContextIndex++] = found[k]; } } continue; } tagName = token; var found = new Array; var foundCount = 0; for (var h = 0; h < currentContext.length; h++) { var elements = currentContext[h].getElementsByTagName(tagName); for (var j = 0; j < elements.length; j++) { found[foundCount++] = elements[j]; } } currentContext = found; } return currentContext; }      /*--------------------------------------------------------------------------------------------------------*/ /** * author: 王永山 * version: 1.1 beta * date: 2008-09-09 * email: [email]wangys0927@163.com[/email] * * update: * 1. 針對前2個beta版，該版本修復了前兩個版本出現(xiàn)的 bug ， * 2. 進行了代碼的簡單封裝（由于本人初學js，對js掌握的很淺，因此面向對象的理解很差，封裝的不好）； * 3. 增加了對 Ctrl 和 Shift 鍵的支持(目前shift鍵的功能和ctrl鍵的功能一樣，還不能達到仿windows的選區(qū)Shift鍵的功能)。 * 4. 增加了獲取"被選區(qū)選中元素"的方法，可以點擊按鈕"getRegions"看效果。 */ function addEvent(eventType,eventFunc,eventObj){      eventObj = eventObj || document;      if(window.attachEvent) eventObj.attachEvent("on"+eventType,eventFunc); if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false); } function clearEventBubble(evt){          evt = evt || window.event;      if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true; if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; }      function posXY(event){     event = event || window.event; var posX = event.pageX || (event.clientX +             (document.documentElement.scrollLeft || document.body.scrollLeft)); var posY = event.pageY || (event.clientY +             (document.documentElement.scrollTop || document.body.scrollTop)); return {x:posX, y:posY}; } //----------- 區(qū)域選擇關鍵方法 -----------------------     var _selectedRegions = [];     function RegionSelect(selRegionProp){          this.regions =[];          var _regions = document.getElementsBySelector(selRegionProp["region"]);          if(_regions && _regions.length > 0){              var _self = this;               for(var i=0; i< _regions.length;i++){                       _regions[i].onmousedown = function(){                               var evt = window.event || arguments[0];                               if(!evt.shiftKey && !evt.ctrlKey){                                   // 清空所有select樣式                                   _self.clearSelections(_regions);                                   this.className += " "+_self.selectedClass;                                   // 清空selected數(shù)組，并加入當前select中的元素                                   _selectedRegions = [];                                   _selectedRegions.push(this);                               }else{                                   if(this.className.indexOf(_self.selectedClass) == -1){                                           this.className += " "+_self.selectedClass;                                           _selectedRegions.push(this);                                   }else{                                        this.className = this.className.replaceAll(_self.selectedClass,"");                                        _selectedRegions.remove(this);                                   }                               }                               clearEventBubble(evt);                       }                       this.regions.push(_regions[i]);               }          }          this.selectedClass = selRegionProp["selectedClass"];          this.selectedRegion = [];          this.selectDiv = null;          this.startX = null;          this.startY = null;     }          RegionSelect.prototype.select = function(){         var _self = this;         addEvent("mousedown",function(){                 var evt = window.event || arguments[0];                 _self.onBeforeSelect(evt);                 clearEventBubble(evt);         },document);                  addEvent("mousemove",function(){                 var evt = window.event || arguments[0];                 _self.onSelect(evt);                 clearEventBubble(evt);         },document);                  addEvent("mouseup",function(){                 _self.onEnd();         },document);     }          RegionSelect.prototype.onBeforeSelect = function(evt){          // 創(chuàng)建模擬 選擇框         if(!document.getElementById("selContainer")){                  this.selectDiv = document.createElement("div");              this.selectDiv.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;";              this.selectDiv.id = "selContainer";              document.body.appendChild(this.selectDiv);     }else{          this.selectDiv = document.getElementById("selContainer");     }          this.startX = posXY(evt).x;     this.startY = posXY(evt).y;     this.isSelect = true;          }          RegionSelect.prototype.onSelect = function(evt){          var _self = this;          if(_self.isSelect){               if(_self.selectDiv.style.display == "none") _self.selectDiv.style.display = "";                          var posX = posXY(evt).x;           var poxY = posXY(evt).y;                     _self.selectDiv.style.left = Math.min(posX, this.startX);              _self.selectDiv.style.top = Math.min(poxY, this.startY);              _self.selectDiv.style.width = Math.abs(posX - this.startX);              _self.selectDiv.style.height = Math.abs(poxY - this.startY);                                var regionList = _self.regions;              for(var i=0; i< regionList.length; i++){                   var r = regionList[i], sr = _self.innerRegion(_self.selectDiv,r);                   if(sr && r.className.indexOf(_self.selectedClass) == -1){                        r.className = r.className + " "+_self.selectedClass;                            _selectedRegions.push(r);                   }else if(!sr && r.className.indexOf(_self.selectedClass) != -1){                        r.className = r.className.replaceAll(_self.selectedClass,"");                        _selectedRegions.remove(r);                       }                                }     }     }          RegionSelect.prototype.onEnd = function(){         if(this.selectDiv){              this.selectDiv.style.display = "none";             }         this.isSelect = false;         //_selectedRegions = this.selectedRegion;     }          // 判斷一個區(qū)域是否在選擇區(qū)內(nèi)     RegionSelect.prototype.innerRegion = function(selDiv, region){          var s_top = parseInt(selDiv.style.top);          var s_left = parseInt(selDiv.style.left);          var s_right = s_left + parseInt(selDiv.offsetWidth);          var s_bottom = s_top + parseInt(selDiv.offsetHeight);                   var r_top = parseInt(region.offsetTop);          var r_left = parseInt(region.offsetLeft);          var r_right = r_left + parseInt(region.offsetWidth);          var r_bottom = r_top + parseInt(region.offsetHeight);               var t = Math.max(s_top, r_top); var r = Math.min(s_right, r_right); var b = Math.min(s_bottom, r_bottom); var l = Math.max(s_left, r_left);      if (b > t+5 && r > l+5) { return region; } else { return null; }              }          RegionSelect.prototype.clearSelections = function(regions){         for(var i=0; i<regions.length;i++){             regions[i].className = regions[i].className.replaceAll(this.selectedClass,"");         }     }          function getSelectedRegions(){         return     _selectedRegions;     } /*-------------------------------------- 區(qū)域選擇方法結束 --------------------------------------------*/          function showSelDiv(){          var selInfo = "";          var arr = getSelectedRegions();          for(var i=0; i<arr.length;i++){                    selInfo += arr[i].innerHTML+"\n";          }          alert("共選擇 "+arr.length+" 個文件，分別是：\n"+selInfo);              }              </script>         <body> <button onclick="showSelDiv();">getRegions</button> <div   id="iwqiea2"   class="fileDiv">file1</div> <div   id="iii2isq"   class="fileDiv">file2</div> <div   id="qwgkimi"   class="fileDiv">file3</div> <div   id="gku2mgq"   class="fileDiv">file4</div> <div   id="ai20a6i"   class="fileDiv">file5</div> <div   id="aiqawsm"   class="fileDiv">file6</div> <div   id="gmguqcm"   class="fileDiv">file7</div> <div   id="mus2y2s"   class="fileDiv">file8</div> <div   id="io42cc2"   class="fileDiv">file9</div> <div   id="g6emcks"   class="fileDiv">file10</div> <div   id="g2ksqaw"   class="fileDiv">file11</div> <div   id="4ucmksq"   class="fileDiv">file12</div> <div   id="y2mi2gu"   class="fileDiv">file13</div> <div   id="oi2o2mw"   class="fileDiv">file14</div> <div   id="sm20yuc"   class="fileDiv">file15</div> <div   id="ckuqokg"   class="fileDiv">file16</div> <div   id="4sqyi2g"   class="fileDiv">file17</div> <div   id="2q2i2s2"   class="fileDiv">file18</div> <div   id="scygc6q"   class="fileDiv">file19</div> <div   id="keyu26o"   class="fileDiv">file20</div> <div   id="awkgokg"   class="fileDiv">file21</div> <div   id="8eqwkgc"   class="fileDiv">file22</div> <div   id="auc2qcg"   class="fileDiv">file23</div> <div   id="aieaeo2"   class="fileDiv">file24</div> <div   id="qggqa2w"   class="fileDiv">file25</div> <div   id="womw2mu"   class="fileDiv">file26</div> <div   id="uo2s2ec"   class="fileDiv">file27</div> <div   id="a220mu6"   class="fileDiv">file28</div> <div   id="im2yii2"   class="fileDiv">file29</div> <div   id="kwwcws6"   class="fileDiv">file30</div> <div   id="ioy2cwm"   class="fileDiv">file31</div> <div   id="skw26ay"   class="fileDiv">file32</div> <div   id="mc6eauq"   class="fileDiv">file33</div> <div   id="i24oyse"   class="fileDiv">file34</div> <div   id="sk2iemk"   class="fileDiv">file35</div> <div   id="i2qy2is"   class="fileDiv">file36</div> <div   id="u2eooyu"   class="fileDiv">file37</div> <div   id="aaoyuea"   class="fileDiv">file38</div> <div   id="koueigg"   class="fileDiv">file39</div> <div   id="2i2oaa6"   class="fileDiv">file40</div> <div   id="m2ywmyw"   class="fileDiv">file41</div> <div   id="4aw2ygw"   class="fileDiv">file42</div> <div   id="6wwgo2w"   class="fileDiv">file43</div> <div   id="k4u2sow"   class="fileDiv">file44</div> <div   id="os22ymu"   class="fileDiv">file45</div> <div   id="cokweo2"   class="fileDiv">file46</div> <div   id="k2eaw2c"   class="fileDiv">file47</div> <div   id="siqm22c"   class="fileDiv">file48</div> <div   id="kyai2w2"   class="fileDiv">file49</div> <div   id="2cmwsqm"   class="fileDiv">file50</div> <div   id="aoayw22"   class="fileDiv">file51</div> <div   id="822sw2s"   class="fileDiv">file52</div> <div   id="iyuco2u"   class="fileDiv">file53</div> <div   id="wkkcao2"   class="fileDiv">file54</div> <div   id="wmwsy22"   class="fileDiv">file55</div> <div   id="umaik2w"   class="fileDiv">file56</div> <div   id="asaw6sy"   class="fileDiv">file57</div> <div   id="cqamiuq"   class="fileDiv">file58</div> <div   id="e2ise82"   class="fileDiv">file59</div> <div   id="augam4u"   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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

String字符串截取的四種方式總結
下面小編就為大家?guī)硪黄猄tring字符串截取的四種方式總結。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
JS中令人發(fā)指的valueOf方法介紹
近期月報里提到了valueOf方法,興致來了翻了下ECMA5里關于valueOf方法的介紹真是令人發(fā)指啊,不可思議的朋友可以參考下啊
2013-02-02
前端GET/POST請求下載文件多種方式代碼示例
文件都是通過接口獲取的,前端通過調(diào)用接口將接口返回的文件下載,下面這篇文章主要給大家介紹了關于前端GET/POST請求下載文件的多種方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-06-06
BootStrap模態(tài)框不垂直居中的解決方法
這篇文章主要為大家詳細介紹了BootStrap模態(tài)框不垂直居中的解決方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
Bootstrap Chart組件使用教程
圖表組件Chart.js是Bootstrap比較好用的組件之一,與一款收費的組件highchart類似,效果上來看免費與收費的產(chǎn)品相差還是有一點點的，不過功能上差不多能滿足我們項目的需要，本文給大家介紹Bootstrap Chart組件使用，需要的朋友參考下吧
2016-04-04
利用原生js實現(xiàn)html5小游戲之打磚塊（附源碼）
這篇文章主要給大家介紹了關于利用原生js實現(xiàn)html5小游戲之打磚塊的相關資料，這是最近工作遇到的一個小需求，文中通過示例代碼介紹的非常詳細，并分享了完整的源碼供大家參考學習，需要的朋友們下面隨著小編來一起學習學習吧。
2018-01-01
Three.js中如何使用CSS3DRenderer和CSS3DSprite實現(xiàn)模型標簽文字
在Three.js中,使用CSS3DRenderer和CSS3DSprite可以輕松地實現(xiàn)模型標簽文字的效果,為場景中的模型提供更直觀的信息展示,本文將介紹如何使用這兩個工具來實現(xiàn)模型標簽文字,并提供相應的代碼示例,感興趣的朋友跟隨小編一起看看吧
2024-05-05
微信小程序下拉刷新及上拉加載原理解析
這篇文章主要介紹了微信小程序下拉刷新及上拉加載實現(xiàn)方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-11-11
tracking.js頁面人臉識別插件使用方法
這篇文章主要為大家詳細介紹了tracking.js頁面識別人臉插件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
js簡單實現(xiàn)調(diào)整網(wǎng)頁字體大小的方法
這篇文章主要介紹了js簡單實現(xiàn)調(diào)整網(wǎng)頁字體大小的方法,通過javascript動態(tài)修改頁面元素樣式實現(xiàn)調(diào)整網(wǎng)頁字體的功能,非常簡單實用,需要的朋友可以參考下
2016-07-07