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 _l && st > _t && selList[i].offsetLeft

file1

file2

file3

file4

file5

file6

file7

file8

file9

[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();

增强效果代码

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

/*--------------------------------- 以下4个方法 摘自网络 ----------------------------------------*/
Array.prototype.remove = function( item ){
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 -1); };
break;
default :
checkFunction = function(e) { return e.getAttribute(attrName); };
}
currentContext = new Array;
var currentContextIndex = 0;
for (var k = 0; k 0){
var _self = this;
for(var i=0; i t+5 && r > l+5) {
return region;
} else {
return null;
}

}

RegionSelect.prototype.clearSelections = function(regions){
for(var i=0; i

getRegions

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

getRegions

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

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