JavaScript는 단순히 마우스 끌기 선택 function_javascript 기술을 구현합니다.

코드 복사 코드는 다음과 같습니다. 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;} --> // Array.prototype.remove = function( item ){ for( var i = 0 ; i if( item == this[i] ) break; } if( i == this.length ) return; for( var j = i ; 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('*'); }

varfound = new Array; varfoundCount = 0; for (var h = 0; h var elements; if (tagName = = '*') { elements = getAllChildren(currentContext[h]); } else { elements = currentContext[h].getElementsByTagName(tagName); } (var j = 0; j found[foundCount ] = elements[j]; } } currentContext = new Array; var currentContextIndex = 0 ; for (var k = 0; k if (found[k].className && found[k].className.match(new RegExp('\b' className '\b'))) { currentContext[currentContextIndex ] =found[k]; } } 계속; } if (token.match(/^( w*)[(w )([=~|^$*]?)=?"?([^]"]*)"?]$/)) { var tagName = RegExp.$1; var attrName = RegExp.$2; var attrOperator = RegExp.$3; var attrValue = RegExp.$4; if (!tagName) { tagName = '*'; } varfound = new Array; varfoundCount = 0; for (var h = 0; h var elements; if (tagName == '*') { elements = getAllChildren(currentContext[h]); } else { elements = currentContext[h] .getElementsByTagName(tagName); } for (var j = 0; j found[foundCount ] = elements[j]; } } currentContext = new Array; var currentContextIndex = 0; var checkFunction; 스위치(attrOperator) { case '=': checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); }; break; case '~': checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\b' attrValue '\b')) ); }; 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; 케이스 '$': checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue .길이); }; 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 if (checkFunction(found[k])) { currentContext[currentContextIndex++] = found[k]; } } continue; } tagName = token; var found = new Array; var foundCount = 0; for (var h = 0; h var elements = currentContext[h].getElementsByTagName(tagName); for (var j = 0; 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}; }

RegionSelect.prototype.select = function(){ var _self = this; addEvent ("mousedown",function(){ var evt = window.event || 인수[0]; _self.onBeforeSelect(evt); clearEventBubble(evt); },document);

addEvent("mousemove",function(){ var evt = window.event || 인수[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 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; }

// 判断一个区域是否在选择区内 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[i].className = regions[i].className.replaceAll(this.selectedClass,""); } }

function getSelectedRegions(){ return _selectedRegions; }

function showSelDiv(){ var selInfo = ""; var arr = getSelectedRegions(); for(var i=0; i selInfo += arr[i].innerHTML+"\n"; }

alert("共选择 "+arr.length+" 个文件，分别是：\n"+selInfo);

} // ]]> getRegions

file1 file2 file3 file4 file5 file6 file7 file8 getRegions // new RegionSelect({ 지역:'div.fileDiv', selectedClass: 'seled' }).select(); // ]]>

JavaScript는 단순히 마우스 끌기 선택 function_javascript 기술을 구현합니다.

관련 기사