JavaScriptはマウスのドラッグ選択機能を簡単に実現します.
14305 ワード
// <![CDATA[
<br>Array.prototype.remove = function( item ){
<br> for( var i = 0 ; i < this.length ; i++ ){
<br> if( item == this[i] )
<br> break;
<br> }
<br> if( i == this.length )
<br> return;
<br> for( var j = i ; j < this.length - 1 ; j++ ){
<br> this[ j ] = this[ j + 1 ];
<br> }
<br> this.length--;
<br> }
<br>
<br>String.prototype.replaceAll = function (AFindText,ARepText){ raRegExp = new RegExp(AFindText,"g"); return this.replace(raRegExp,ARepText);}
<br> function getAllChildren(e) {
<br> return e.all ? e.all : e.getElementsByTagName('*');
<br>}
<p></p>
<p>document.getElementsBySelector = function(selector) {<br> if (!document.getElementsByTagName) {<br> return new Array();<br> }<br> var tokens = selector.split(' ');<br> var currentContext = new Array(document);<br> for (var i = 0; i < tokens.length; i++) {<br> token = tokens[i].replace(/^\s+/,'').replace(/\s+$/,'');;<br> if (token.indexOf('#') > -1) {<br> var bits = token.split('#');<br> var tagName = bits[0];<br> var id = bits[1];<br> var element = document.getElementById(id);<br> if (tagName && element.nodeName.toLowerCase() != tagName) {<br> return new Array();<br> }<br> currentContext = new Array(element);<br> continue; <br> }<br> if (token.indexOf('.') > -1) {</p>
<p> var bits = token.split('.');<br> var tagName = bits[0];<br> var className = bits[1];<br> if (!tagName) {<br> tagName = '*';<br> }</p>
<p> var found = new Array;<br> var foundCount = 0;<br> for (var h = 0; h < currentContext.length; h++) {<br> var elements;<br> if (tagName == '*') {<br> elements = getAllChildren(currentContext[h]);<br> } else {<br> elements = currentContext[h].getElementsByTagName(tagName);<br> }<br> for (var j = 0; j < elements.length; j++) {<br> found[foundCount++] = elements[j];<br> }<br> }<br> currentContext = new Array;<br> var currentContextIndex = 0;<br> for (var k = 0; k < found.length; k++) {<br> if (found[k].className && found[k].className.match(new RegExp('\\b'+className+'\\b'))) {<br> currentContext[currentContextIndex++] = found[k];<br> }<br> }<br> continue;<br> }<br> if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)) {<br> var tagName = RegExp.$1;<br> var attrName = RegExp.$2;<br> var attrOperator = RegExp.$3;<br> var attrValue = RegExp.$4;<br> if (!tagName) {<br> tagName = '*';<br> }<br> var found = new Array;<br> var foundCount = 0;<br> for (var h = 0; h < currentContext.length; h++) {<br> var elements;<br> if (tagName == '*') {<br> elements = getAllChildren(currentContext[h]);<br> } else {<br> elements = currentContext[h].getElementsByTagName(tagName);<br> }<br> for (var j = 0; j < elements.length; j++) {<br> found[foundCount++] = elements[j];<br> }<br> }<br> currentContext = new Array;<br> var currentContextIndex = 0;<br> var checkFunction; <br> switch (attrOperator) {<br> case '=':<br> checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); };<br> break;<br> case '~': <br> checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b'+attrValue+'\\b'))); };<br> break;<br> case '|':<br> checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^'+attrValue+'-?'))); };<br> break;<br> case '^':<br> checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); };<br> break;<br> case '$': <br> checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); };<br> break;<br> case '*': <br> checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); };<br> break;<br> default :<br> checkFunction = function(e) { return e.getAttribute(attrName); };<br> }<br> currentContext = new Array;<br> var currentContextIndex = 0;<br> for (var k = 0; k < found.length; k++) {<br> if (checkFunction(found[k])) {<br> currentContext[currentContextIndex++] = found[k];<br> }<br> }<br> continue;<br> }<br> tagName = token;<br> var found = new Array;<br> var foundCount = 0;<br> for (var h = 0; h < currentContext.length; h++) {<br> var elements = currentContext[h].getElementsByTagName(tagName);<br> for (var j = 0; j < elements.length; j++) {<br> found[foundCount++] = elements[j];<br> }<br> }<br> currentContext = found;<br> }<br> return currentContext;<br>}<br><br> function addEvent(eventType,eventFunc,eventObj){<br> eventObj = eventObj || document;<br> if(window.attachEvent) eventObj.attachEvent("on"+eventType,eventFunc);<br> if(window.addEventListener) eventObj.addEventListener(eventType,eventFunc,false);<br> }<br>function clearEventBubble(evt){<br> evt = evt || window.event;<br> if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true; <br> if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false;<br>}<br><br>function posXY(event){<br> event = event || window.event;<br> var posX = event.pageX || (event.clientX +<br> (document.documentElement.scrollLeft || document.body.scrollLeft));<br> var posY = event.pageY || (event.clientY +<br> (document.documentElement.scrollTop || document.body.scrollTop));<br> return {x:posX, y:posY};<br>}</p>
<p> var _selectedRegions = [];<br> function RegionSelect(selRegionProp){<br> this.regions =[];<br> var _regions = document.getElementsBySelector(selRegionProp["region"]);<br> if(_regions && _regions.length > 0){<br> var _self = this;<br> for(var i=0; i< _regions.length;i++){<br> _regions[i].onmousedown = function(){<br> var evt = window.event || arguments[0];<br> if(!evt.shiftKey && !evt.ctrlKey){<br> // select <br> _self.clearSelections(_regions);<br> this.className += " "+_self.selectedClass;<br> // selected ， select <br> _selectedRegions = [];<br> _selectedRegions.push(this);<br> }else{<br> if(this.className.indexOf(_self.selectedClass) == -1){<br> this.className += " "+_self.selectedClass;<br> _selectedRegions.push(this);<br> }else{<br> this.className = this.className.replaceAll(_self.selectedClass,"");<br> _selectedRegions.remove(this);<br> }<br> }<br> clearEventBubble(evt);<br> }<br> this.regions.push(_regions[i]);<br> }<br> }<br> this.selectedClass = selRegionProp["selectedClass"];<br> this.selectedRegion = [];<br> this.selectDiv = null;<br> this.startX = null;<br> this.startY = null;<br> }<br><br> RegionSelect.prototype.select = function(){<br> var _self = this;<br> addEvent("mousedown",function(){<br> var evt = window.event || arguments[0];<br> _self.onBeforeSelect(evt);<br> clearEventBubble(evt);<br> },document);<br><br> addEvent("mousemove",function(){<br> var evt = window.event || arguments[0];<br> _self.onSelect(evt);<br> clearEventBubble(evt);<br> },document);<br><br> addEvent("mouseup",function(){<br> _self.onEnd();<br> },document);<br> }<br><br> RegionSelect.prototype.onBeforeSelect = function(evt){<br> if(!document.getElementById("selContainer")){<br> this.selectDiv = document.createElement("div");<br> 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;";<br> this.selectDiv.id = "selContainer";<br> document.body.appendChild(this.selectDiv);<br> }else{<br> this.selectDiv = document.getElementById("selContainer");<br> }<br><br> this.startX = posXY(evt).x;<br> this.startY = posXY(evt).y;<br> this.isSelect = true;<br><br> }<br><br> RegionSelect.prototype.onSelect = function(evt){<br> var _self = this;<br> if(_self.isSelect){<br> if(_self.selectDiv.style.display == "none") _self.selectDiv.style.display = "";<br><br> var posX = posXY(evt).x;<br> var poxY = posXY(evt).y;<br><br> _self.selectDiv.style.left = Math.min(posX, this.startX);<br> _self.selectDiv.style.top = Math.min(poxY, this.startY);<br> _self.selectDiv.style.width = Math.abs(posX - this.startX);<br> _self.selectDiv.style.height = Math.abs(poxY - this.startY); <br><br> var regionList = _self.regions;<br> for(var i=0; i< regionList.length; i++){<br> var r = regionList[i], sr = _self.innerRegion(_self.selectDiv,r);<br> if(sr && r.className.indexOf(_self.selectedClass) == -1){<br> r.className = r.className + " "+_self.selectedClass; <br> _selectedRegions.push(r);<br> }else if(!sr && r.className.indexOf(_self.selectedClass) != -1){<br> r.className = r.className.replaceAll(_self.selectedClass,"");<br> _selectedRegions.remove(r);<br> }<br><br> }<br> }<br> }<br><br> RegionSelect.prototype.onEnd = function(){<br> if(this.selectDiv){<br> this.selectDiv.style.display = "none"; <br> }<br> this.isSelect = false;<br> //_selectedRegions = this.selectedRegion;<br> }<br><br> // <br> RegionSelect.prototype.innerRegion = function(selDiv, region){<br> var s_top = parseInt(selDiv.style.top);<br> var s_left = parseInt(selDiv.style.left);<br> var s_right = s_left + parseInt(selDiv.offsetWidth);<br> var s_bottom = s_top + parseInt(selDiv.offsetHeight);<br><br> var r_top = parseInt(region.offsetTop);<br> var r_left = parseInt(region.offsetLeft);<br> var r_right = r_left + parseInt(region.offsetWidth);<br> var r_bottom = r_top + parseInt(region.offsetHeight);<br><br> var t = Math.max(s_top, r_top);<br> var r = Math.min(s_right, r_right);<br> var b = Math.min(s_bottom, r_bottom);<br> var l = Math.max(s_left, r_left);<br><br> if (b > t+5 && r > l+5) {<br> return region;<br> } else {<br> return null;<br> }<br><br> }<br><br> RegionSelect.prototype.clearSelections = function(regions){<br> for(var i=0; i<regions.length;i++){<br> regions[i].className = regions[i].className.replaceAll(this.selectedClass,"");<br> }<br> }<br><br> function getSelectedRegions(){<br> return _selectedRegions;<br> }</p>
<p> function showSelDiv(){<br> var selInfo = "";<br> var arr = getSelectedRegions();<br> for(var i=0; i<arr.length;i++){<br> selInfo += arr[i].innerHTML+"
";<br> }</p>
<p> alert(" "+arr.length+" ， ：
"+selInfo);<br><br> }<br>// ]]>
file1
file2
file3
file4
file5
file6
file7
file8
// <![CDATA[<br>new RegionSelect({<br> region:'div.fileDiv',<br> selectedClass: 'seled'<br> }).select();<br>// ]]>