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

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




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;}


(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 -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