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

2019-11-21 01:37:48

字體：大中小

來源：轉載

供稿：網友

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

<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;     } //m.survivalescaperooms.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="iwvjtn8m0"   class="fileDiv">file1</div>          <div   id="iwvjtn8m0"   class="fileDiv">file2</div>          <div   id="iwvjtn8m0"   class="fileDiv">file3</div>          <div   id="iwvjtn8m0"   class="fileDiv">file4</div>          <div   id="iwvjtn8m0"   class="fileDiv">file5</div>          <div   id="iwvjtn8m0"   class="fileDiv">file6</div>          <div   id="iwvjtn8m0"   class="fileDiv">file7</div>          <div   id="iwvjtn8m0"   class="fileDiv">file8</div>          <div   id="iwvjtn8m0"   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 = '*'; } 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版，該版本修復了前兩個版本出現的 bug ， * 2. 進行了代碼的簡單封裝（由于本人初學js，對js掌握的很淺，因此面向對象的理解很差，封裝的不好）； * 3. 增加了對 Ctrl 和 Shift 鍵的支持(目前shift鍵的功能和ctrl鍵的功能一樣，還不能達到仿windows的選區Shift鍵的功能)。 * 4. 增加了獲取"被選區選中元素"的方法，可以點擊按鈕"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}; } //----------- 區域選擇關鍵方法 -----------------------     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數組，并加入當前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){          // 創建模擬 選擇框         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;     }          // 判斷一個區域是否在選擇區內     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;     } /*-------------------------------------- 區域選擇方法結束 --------------------------------------------*/          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="iwvjtn8m0"   class="fileDiv">file1</div> <div   id="iwvjtn8m0"   class="fileDiv">file2</div> <div   id="iwvjtn8m0"   class="fileDiv">file3</div> <div   id="iwvjtn8m0"   class="fileDiv">file4</div> <div   id="iwvjtn8m0"   class="fileDiv">file5</div> <div   id="iwvjtn8m0"   class="fileDiv">file6</div> <div   id="iwvjtn8m0"   class="fileDiv">file7</div> <div   id="iwvjtn8m0"   class="fileDiv">file8</div> <div   id="iwvjtn8m0"   class="fileDiv">file9</div> <div   id="iwvjtn8m0"   class="fileDiv">file10</div> <div   id="iwvjtn8m0"   class="fileDiv">file11</div> <div   id="iwvjtn8m0"   class="fileDiv">file12</div> <div   id="iwvjtn8m0"   class="fileDiv">file13</div> <div   id="iwvjtn8m0"   class="fileDiv">file14</div> <div   id="iwvjtn8m0"   class="fileDiv">file15</div> <div   id="iwvjtn8m0"   class="fileDiv">file16</div> <div   id="iwvjtn8m0"   class="fileDiv">file17</div> <div   id="iwvjtn8m0"   class="fileDiv">file18</div> <div   id="iwvjtn8m0"   class="fileDiv">file19</div> <div   id="iwvjtn8m0"   class="fileDiv">file20</div> <div   id="iwvjtn8m0"   class="fileDiv">file21</div> <div   id="iwvjtn8m0"   class="fileDiv">file22</div> <div   id="iwvjtn8m0"   class="fileDiv">file23</div> <div   id="iwvjtn8m0"   class="fileDiv">file24</div> <div   id="iwvjtn8m0"   class="fileDiv">file25</div> <div   id="iwvjtn8m0"   class="fileDiv">file26</div> <div   id="iwvjtn8m0"   class="fileDiv">file27</div> <div   id="iwvjtn8m0"   class="fileDiv">file28</div> <div   id="iwvjtn8m0"   class="fileDiv">file29</div> <div   id="iwvjtn8m0"   class="fileDiv">file30</div> <div   id="iwvjtn8m0"   class="fileDiv">file31</div> <div   id="iwvjtn8m0"   class="fileDiv">file32</div> <div   id="iwvjtn8m0"   class="fileDiv">file33</div> <div   id="iwvjtn8m0"   class="fileDiv">file34</div> <div   id="iwvjtn8m0"   class="fileDiv">file35</div> <div   id="iwvjtn8m0"   class="fileDiv">file36</div> <div   id="iwvjtn8m0"   class="fileDiv">file37</div> <div   id="iwvjtn8m0"   class="fileDiv">file38</div> <div   id="iwvjtn8m0"   class="fileDiv">file39</div> <div   id="iwvjtn8m0"   class="fileDiv">file40</div> <div   id="iwvjtn8m0"   class="fileDiv">file41</div> <div   id="iwvjtn8m0"   class="fileDiv">file42</div> <div   id="iwvjtn8m0"   class="fileDiv">file43</div> <div   id="iwvjtn8m0"   class="fileDiv">file44</div> <div   id="iwvjtn8m0"   class="fileDiv">file45</div> <div   id="iwvjtn8m0"   class="fileDiv">file46</div> <div   id="iwvjtn8m0"   class="fileDiv">file47</div> <div   id="iwvjtn8m0"   class="fileDiv">file48</div> <div   id="iwvjtn8m0"   class="fileDiv">file49</div> <div   id="iwvjtn8m0"   class="fileDiv">file50</div> <div   id="iwvjtn8m0"   class="fileDiv">file51</div> <div   id="iwvjtn8m0"   class="fileDiv">file52</div> <div   id="iwvjtn8m0"   class="fileDiv">file53</div> <div   id="iwvjtn8m0"   class="fileDiv">file54</div> <div   id="iwvjtn8m0"   class="fileDiv">file55</div> <div   id="iwvjtn8m0"   class="fileDiv">file56</div> <div   id="iwvjtn8m0"   class="fileDiv">file57</div> <div   id="iwvjtn8m0"   class="fileDiv">file58</div> <div   id="iwvjtn8m0"   class="fileDiv">file59</div> <div   id="iwvjtn8m0"   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需刷新才能執行]

上一篇：仿3721首頁模塊拖曳移動效果js代碼[可拖曳層移動層]

下一篇：javascript的trim,ltrim,rtrim自定義函數