javaｓｃｒｉｐｔ简单地实现鼠标拖动选择功能。

复制代码代码如下所示：
<！——
体{ padding-top：50px；填充左：100px；填充右：150px；}
。filediv {浮动：左；宽度：100px；身高：100px；文本对齐：中心；线高度：100px；字体大小：12px；边框1px solid # cccccc；右边距：10px；margin-bottom: 10px；}。
。西列{ border: 1px solid # FF0000；背景颜色：# d6dff7；}
-->
< / / { CDATA {！
array.prototype.remove =功能（项目）{
对于（var i = 0；i < this.length；i++）{
如果（项目= { }）
打破；
}
如果（i =这个，长度）
返回；
对于（var j =我；J < this.length - 1；j++）{
这个{这个{ + J + 1 }；
}
this.length--；
}

string.prototype.replaceall =功能（afindtext，areptext）{ raregexp = new RegExp（afindtext，G）；返回this.replace（raregexp，）}；}
功能getallchildren（e）{
返回：e.getelementsbytagname e e（*）；
}

document.getelementsbyselector =功能（选择）{
如果（！文件。getElementsByTagName）{
返回新数组（）；
}
VaR令牌= selector.split（''）；
无功currentcontext =新的数组（文件）；
对于（var i = 0；i < tokens.length；i++）{
令牌=令牌{ } }；
如果（token.indexof（' #）> 1）{
无功位= token.split（' #）；
var标签名=位{ 0 }；
var =位{ 1 }；
VaR元= document.getelementbyid（ID）；
如果（tagname element.nodename.tolowercase（）！= tagname）{
返回新数组（）；
}
currentcontext =新的数组（元）；
继续；
}
如果（token.indexof（1）> {）

无功位= token.split（' '）；
var标签名=位{ 0 }；
VaR classname =位{ 1 }；
如果（！tagname）{
标签名为*；
}

新数组；
无功foundcount = 0；
对于（var H = 0；h＜currentcontext.length；H + +）{
var元素；
如果（tagname = = {*）
元素= getallchildren（currentcontext {H}）；
{人}
元素= currentcontext {H} getElementsByTagName（TagName）；
}
对于（var j = 0；J < elements.length；j++）{
发现{ foundcount + } = { }元素{J}.；
}
}
currentcontext =新的数组；
无功currentcontextindex = 0；
对于（var k = 0；K＜found.length；K+）{
如果（发现{ } { K K。类名发现}。classname.match（new RegExp（'%s' B +类名+ B）））{
currentcontext { currentcontextindex + } = {克}发现；
}
}
继续；
}
如果（token.match（ { / ^（ W *）（ W +）（{ = ~ | ^美元* }）=（{ ^ }} *） } $ /））{
VaR tagname = regexp。1美元；
无功attrname = 2美元的正则表达式；
无功attroperator = 3美元的正则表达式；
无功attrvalue = 4美元的正则表达式；
如果（！tagname）{
标签名为*；
}
新数组；
无功foundcount = 0；
对于（var H = 0；h＜currentcontext.length；H + +）{
var元素；
如果（tagname = = {*）
元素= getallchildren（currentcontext {H}）；
{人}
元素= currentcontext {H} getElementsByTagName（TagName）；
}
对于（var j = 0；J < elements.length；j++）{
发现{ foundcount + } = { }元素{J}.；
}
}
currentcontext =新的数组；
无功currentcontextindex = 0；
VAR检验；
开关（attroperator）{
=案例：
检验=功能（e）{ return（e.getattribute = = attrvalue（attrname））；}；
打破；
案例~：
检验=功能（e）{ return（e.getattribute（attrname）。比赛（new RegExp（'%s' B + attrvalue + '%s' B）））}；}；
打破；
案例|：
检验=功能（e）{ return（e.getattribute（attrname）。比赛（new RegExp（' ^ + attrvalue + ' '）））}；}；
打破；
案例：
检验=功能（e）{ return（e.getattribute（attrname）。IndexOf（attrvalue）= = 0）；}；
打破；
案件' $ '：
检验=功能（e）{ return（e.getattribute（attrname）。LastIndexOf（attrvalue）= e.getattribute（attrname）。长attrvalue。长度）；}；
打破；
*案例：
检验=功能（e）{ return（e.getattribute（attrname）。IndexOf（attrvalue）> 1）；}；
打破；
违约:
检验=功能（e）{ return e.getattribute（attrname）；}；
}
currentcontext =新的数组；
无功currentcontextindex = 0；
对于（var k = 0；K＜found.length；K+）{
如果（检验（发现{ k }））{
currentcontext { currentcontextindex + } = {克}发现；
}
}
继续；
}
tagname =令牌；
新数组；
无功foundcount = 0；
对于（var H = 0；h＜currentcontext.length；H + +）{
var elements = currentcontext {H} getElementsByTagName（TagName）；
对于（var j = 0；J < elements.length；j++）{
发现{ foundcount + } = { }元素{J}.；
}
}
currentcontext =发现；
}
返回currentcontext；
}

函数AddEvent（事件类型，eventfunc，eventobj）{
eventobj = eventobj文件| |；
如果（窗口。attachevent）eventobj.attachevent（+事件类型，eventfunc）；
If (window.addEventListener) eventObj.addEventListener (eventType, eventFunc, false);
}
功能cleareventbubble（EVT）{
极值理论EVT window.event | | =；
如果（EVT。里面）evt.stoppropagation（）；其他evt.cancelbubble =真；
如果（EVT。preventDefault）evt.preventdefault（）；其他evt.returnvalue = false；
}

功能posxy（事件）{
事件=事件window.event | |；
var POSx = event.pagex（event.clientx + | |
（文档。文档元素}。scrollLeft）document.body.scrollleft | |）；
VaR花束= event.pagey（event.clienty + | |
（文档。文档元素}。scrollTop）document.body.scrolltop | |）；
返回：{ x条POSx，Y：波西}；
}

无功_selectedregions = { }；
功能regionselect（selregionprop）{
this.regions = { }；
无功_regions = document.getelementsbyselector（selregionprop {区））；
如果（_regions _regions.length > 0）{
无功_self =这；
对于（var i = 0；i < _regions.length；i++）{
我_regions { }。onmousedown =函数（）{
VaR EVT = window.event参数{ 0 } | |；
如果（！evt.shiftkey！EVT。ctrlkey）{
清空所有选择样式
_self.clearselections（_regions）；
this.classname =+ _self。selectedclass ；
空选择数组，并在选择中加入当前元素
_selectedregions = { }；
_selectedregions.push（本）；
其他{ }
如果（this.classname.indexof（_self。selectedclass）= = 1）{
this.classname =+ _self。selectedclass ；
_selectedregions.push（本）；
其他{ }
this.classname = this.classname.replaceall（_self.selectedclass，）；
_selectedregions.remove（本）；
}
}
cleareventbubble（EVT）；
}
This.regions.push（_regions {我}）；
}
}
this.selectedclass = selregionprop {selectedclass}；
this.selectedregion = { }；
this.selectdiv = null；
this.startx = null；
this.starty = null；
}

regionselect.prototype.select =函数（）{
无功_self =这；
AddEvent（mouseDown
VaR EVT = window.event参数{ 0 } | |；
_self.onbeforeselect（EVT）；
cleareventbubble（EVT）；
}，文档）；

AddEvent（MouseMove
VaR EVT = window.event参数{ 0 } | |；
_self.onselect（EVT）；
cleareventbubble（EVT）；
}，文档）；

AddEvent（MouseUp
_self.onend（）；
}，文档）；
}

regionselect.prototype.onbeforeselect =功能（EVT）{
如果（！document.getelementbyid（selcontainer ））{
this.selectdiv = document.createelement（div）；
this.selectdiv.style.csstext = 的位置：绝对；宽度：0px；高度：0px；字体大小：0px；保证金：0px；padding: 0px；边界：1px冲# 0099ff；背景颜色：# c3d5ed；背景颜色：# c3d5ed；（）；
this.selectdiv.id =selcontainer ；
document.body.appendchild（这个。selectdiv）；
其他{ }
this.selectdiv = document.getelementbyid（selcontainer ）；
}

this.startx = posxy（EVT）X；
this.starty = posxy（EVT）。Y；
this.isselect =真；

}

regionselect.prototype.onselect =功能（EVT）{
无功_self =这；
如果（_self。选用）{
如果（_self.selectdiv.style.display = _self.selectdiv.style.display = = 无）；

var POSx = posxy（EVT）X；
VaR的= posxy（EVT）。Y；

_self.selectdiv.style.left = Math.min（POSx，这。startx）；
_self.selectdiv.style.top = Math.min（这个，这个初始位置）；
_self.selectdiv.style.width = math.abs（条POSx这。startx）；
_self.selectdiv.style.height = math.abs（珀西-这个初始位置）；

无功regionlist = _self.regions；
对于（var i = 0；i < regionlist.length；i++）{
VAR r = regionlist {我}，SR = _self.innerregion（_self.selectdiv，R）；
如果（SR r.classname.indexof（_self。selectedclass）= = 1）{
r.classname = r.classname ++ _self.selectedclass；
_selectedregions.push（R）；
否则如果（！SR r.classname.indexof（_self。selectedclass）！= 1）{
r.classname = r.classname.replaceall（_self.selectedclass，）；
_selectedregions.remove（R）；
}

}
}
}

regionselect.prototype.onend =函数（）{
如果（这。selectdiv）{
this.selectdiv.style.display =没有；
}
this.isselect = false；
/ / _selectedregions = this.selectedregion；
}

确定选择区域中的区域
regionselect.prototype.innerregion =功能（seldiv，区）{
无功s_top = parseInt（seldiv。风格。顶部）；
无功s_left = parseInt（seldiv。风格。左）；
无功s_right = s_left + parseInt（seldiv。offsetwidth）；
无功s_bottom = s_top + parseInt（seldiv。offsetheight）；

无功r_top = parseInt（区域。offsettop）；
无功r_left = parseInt（区域。offsetleft）；
无功r_right = r_left + parseInt（区域。offsetwidth）；
无功r_bottom = r_top + parseInt（区域。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 = math.max（s_left，r_left）；

如果（b + 5 5）
回流区；
{人}
返回null；
}

}

regionselect.prototype.clearselections =功能（地区）{
对于（var i = 0；i < regions.length；i++）{
地区{我}，{我} classname =地区。classname.replaceall（this.selectedclass，）；
}
}

功能getselectedregions（）{
返回_selectedregions；
}

功能showseldiv（）{
无功selinfo = ；
var arr = getselectedregions（）；
对于（var i = 0；i < arr.length；i++）{
selinfo = ARR {我} .innerHTML + ；
}

警报（公共选择+ arr.length + 文件+ selinfo，分别）；

}
>
getregions
1
源文件
源文件
file4
file5
file6
file7
file8
getregions
< / / { CDATA {！
新的regionselect（{
地区：'div.filediv，
SelectedClass：'seled
}）选择（）；
>