JavaScript simple to implement mouse drag selection function _javascript skills

Copy Code code as follows:

<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" >//<! [cdata[
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+ '));
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;
}

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) {
Clear all Select Styles
_self.clearselections (_regions);
This.classname + = "" +_self.selectedclass;
Empties the selected array and joins the elements in the current 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;
}

Determine if an area is in the selection area
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 ("A total of selected" +arr.length+ "files, respectively: \ n" +selinfo);

}
]]></script>
<p><button onclick= "Showseldiv ();" >getRegions</button></p>
<div class= "Filediv" >file1</div>
<div class= "Filediv" >file2</div>
<div class= "Filediv" >file3</div>
<div class= "Filediv" >file4</div>
<div class= "Filediv" >file5</div>
<div class= "Filediv" >file6</div>
<div class= "Filediv" >file7</div>
<div class= "Filediv" >file8</div>
<div style= "Float:left; width:100%; " ><button onclick= "Showseldiv ();" >getRegions</button></div>
<script type= "Text/javascript" >//<! [cdata[
New Regionselect ({
Region: ' Div.filediv ',
Selectedclass: ' seled '
). Select ();
]]></script>