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

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

<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 <body>file1file2file3file4file5file6file7file8file9</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 <body> <button onclick="showSelDiv（）;">getRegions</button> file1 file2 file3 file4 file5 file6 file7 file8 file9 file10 file11 file12 file13 file14 file15 file16 file17 file18 file19 file20 file21 file22 file23 file24 file25 file26 file27 file28 file29 file30 file31 file32 file33 file34 file35 file36 file37 file38 file39 file40 file41 file42 file43 file44 file45 file46 file47 file48 file49 file50 file51 file52 file53 file54 file55 file56 file57 file58 file59 file60 <button onclick="showSelDiv（）;">getRegions</button> </body> <script> new RegionSelect（{ region:"div.fileDiv", selectedClass: "seled" }）.select（）; </script> </html>

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