複製程式碼如下：
<樣式><!--
正文{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:1pxsolid #cccccc;margin-right:10px;margin-bottom: 1pxsolid #cccccccc;margin-right:10px;margin-bottom: 10010像素；}
.seled{邊框：1px實心#ff0000;背景顏色：#D6DFF7;}
--></風格>
<script type="text/javascript">// <![CDATA[
Array.prototype.remove = function( item ){
for( var i = 0 ; i < this.length ; i++ ){
if( 項目 == this[i] )
休息;
}
if( i == this.length )
返回;
for( var j = i ; j < this.length - 1 ; j++ ){
這個[ j ] = 這個[ j + 1 ];
}
this.length--;
}
String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g");返回 this.replace(raRegExp,ARepText);}
函數 getAllChildren(e) {
返回 e.all ? e.all : e.getElementsByTagName('*');
}
document.getElementsBySelector = 函數（選擇器）{
if (!document.getElementsByTagName) {
返回新數組（）；
}
var tokens = 選擇器.split(' ');
var currentContext = new Array(文檔);
for (var i = 0; i < tokens.length; i++) {
token = tokens[i].replace(/^/s+/,'').replace(//s+$/,'');;
if (token.indexOf('#') > -1) {
var 位元 = token.split('#');
var tagName = 位元[0];
var id = 位[1];
var element = document.getElementById(id);
if (tagName && element.nodeName.toLowerCase() != tagName) {
返回新數組（）；
}
currentContext = new Array(元素);
繼續;
}
if (token.indexOf('.') > -1) {
var 位元 = token.split('.');
var tagName = 位元[0];
var 類別名稱 = 位元[1];
if (!tagName) {
標籤名 = '*';
}
var 找到=新數組；
var 發現計數 = 0;
for (var h = 0; h < currentContext.length; h++) {
var 元素；
if (標籤名 == '*') {
元素 = getAllChildren(currentContext[h]);
} 別的 {
elements = currentContext[h].getElementsByTagName(tagName);
}
for (var j = 0; j < elements.length; j++) {
找到[foundCount++] = 元素[j];
}
}
當前上下文=新數組；
var 目前上下文索引 = 0;
for (var k = 0; k < 找到的長度; k++) {
if (found[k].className &&found[k].className.match(new RegExp('//b'+className+'//b'))) {
currentContext[currentContextIndex++] = 找到[k];
}
}
繼續;
}
if (token.match(/^(/w*)/[(/w+)([=~/|/^/$/*]?)=?"?([^/]"]*)"?/ ]$/)) {
var tagName = RegExp.$1;
var attrName = RegExp.$2;
var attrOperator = RegExp.$3;
var attrValue = RegExp.$4;
if (!tagName) {
標籤名 = '*';
}
var 找到=新數組；
var 發現計數 = 0;
for (var h = 0; h < currentContext.length; h++) {
var 元素；
if (標籤名 == '*') {
元素 = getAllChildren(currentContext[h]);
} 別的 {
elements = currentContext[h].getElementsByTagName(tagName);
}
for (var j = 0; j < elements.length; j++) {
找到[foundCount++] = 元素[j];
}
}
當前上下文=新數組；
var 目前上下文索引 = 0;
var check 函數；
開關（attrOperator）{
案例“=”：
checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); } };
休息;
案例“~”：
checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('//b'+attrValue+'//b'))); } };
休息;
案例“|”：
checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); } };
休息;
案例“^”：
checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); } };
休息;
案例“$”：
checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };
休息;
案件 '*'：
checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); } };
休息;
預設 :
checkFunction = function(e) { return e.getAttribute(attrName); } };
}
當前上下文=新數組；
var 目前上下文索引 = 0;
for (var k = 0; k < 找到的長度; k++) {
if (checkFunction(found[k])) {
currentContext[currentContextIndex++] = 找到[k];
}
}
繼續;
}
標籤名稱 = 令牌；
var 找到=新數組；
var 發現計數 = 0;
for (var h = 0; h < currentContext.length; h++) {
var elements = currentContext[h].getElementsByTagName(tagName);
for (var j = 0; j < elements.length; j++) {
找到[foundCount++] = 元素[j];
}
}
當前上下文=找到；
}
返回當前上下文；
}
函式 addEvent(eventType,eventFunc,eventObj){
事件物件 = 事件物件 ||文件;
if(window.attachEvent) eventObj.attachEvent("on"+eventType,eventFunc);
if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false);
}
函數clearEventBubble(evt){
事件 = 事件 ||視窗.事件;
if (evt.stopPropagation) evt.stopPropagation();否則 evt.cancelBubble = true;
if (evt.preventDefault) evt.preventDefault();否則 evt.returnValue = false;
}
函數 posXY(事件){
事件=事件||視窗.事件;
var posX = event.pageX || （事件.clientX +
(document.documentElement.scrollLeft || document.body.scrollLeft));
var posY = event.pageY || （事件.clientY +
(document.documentElement.scrollTop || document.body.scrollTop));
返回 {x:posX, y:posY};
}
var _selectedRegions = [];
函式 RegionSelect(selRegionProp){
this.regions =[];
var _regions = document.getElementsBySelector(selRegionProp["region"]);
if(_regions && _regions.length > 0){
var _self = 這;
for(var i=0; i< _regions.length;i++){
_regions[i].onmousedown = 函數(){
var evt = window.event ||參數[0]；
if(!evt.shiftKey && !evt.ctrlKey){
// 清空所有選擇樣式
_self.clearSelections(_regions);
this.className += " "+_self.selectedClass;
// 清空selected倉庫，並加入目前select中的元素
_selectedRegions = [];
_selectedRegions.push(this);
}別的{
if(this.className.indexOf(_self.selectedClass) == -1){
this.className += " "+_self.selectedClass;
_selectedRegions.push(this);
}別的{
this.className = this.className.replaceAll(_self.selectedClass,"");
_selectedRegions.remove(this);
}
}
清除事件氣泡（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 = 這;
addEvent("滑鼠按下",函數(){
var evt = window.event ||參數[0]；
_self.onBeforeSelect(evt);
清除事件氣泡（evt）；
},文件);
addEvent("滑鼠移動",函數(){
var evt = window.event ||參數[0]；
_self.onSelect(evt);
清除事件氣泡（evt）；
},文件);
addEvent("滑鼠懸停",function(){
_self.onEnd();
},文件);
}
RegionSelect.prototype.onBeforeSelect = 函數(evt){
if(!document.getElementById("selContainer")){
this.selectDiv = document.createElement("div");
this.selectDiv.style.cssText = "位置：絕對；寬度：0px；高度：0px；字體大小：0px；邊距：0px；填滿：0px；邊框：1px 虛線#0099FF；背景顏色：#C3D5ED；z -索引：1000；過濾器：alpha（不透明度：60）；不透明度：0.6；顯示：無；」；
this.selectDiv.id = "selContainer";
document.body.appendChild(this.selectDiv);
}別的{
this.selectDiv = document.getElementById("selContainer");
}
this.startX = posXY(evt).x;
this.startY = posXY(evt).y;
this.isSelect = true;
}
RegionSelect.prototype.onSelect = 函數(evt){
var _self = 這;
if(_self.isSelect){
if(_self.selectDiv.style.display == "無") _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);
varregionList = _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 = "無";
}
this.isSelect = false;
//_selectedRegions = this.selectedRegion;
}
// 判斷一個區域是否在選擇間隔
RegionSelect.prototype.innerRegion = 函數(selDiv, 區域){
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);
如果 (b > t+5 && r > l+5) {
返回區域；
} 別的 {
返回空值；
}
}
RegionSelect.prototype.clearSelections = 函數（區域）{
for(var i=0; i<regions.length;i++){
regions[i].className =regions[i].className.replaceAll(this.selectedClass,"");
}
}
函數 getSelectedRegions(){
返回_selectedRegions；
}
函數 showSelDiv(){
var selInfo = "";
var arr = getSelectedRegions();
for(var i=0; i<arr.length;i++){
selInfo += arr[i].innerHTML+"/n";
}
alert("共選擇"+arr.length+"個文件，分別是：/n"+selInfo);
}
// ]]></腳本>
<p><button onclick="showSelDiv();">getRegions</button></p>
<div>檔案1</div>
<div>檔案2</div>
<div>檔案3</div>
<div>檔4</div>
<div>檔5</div>
<div>檔6</div>
<div>檔案7</div>
<div>檔案8</div>
<div style="float: left; width: 100%;"><button onclick="showSelDiv();">getRegions</button></div>
<script type="text/javascript">// <![CDATA[
新的區域選擇({
區域：'div.fileDiv',
selectedClass: 'sed'
}）。
// ]]></腳本>