js 在页面上模拟多选，蚂蚁线线框

2021-08-26 11:54:37

js 在页面上模拟多选，蚂蚁线线框
<html> 
    <head></head> 
    <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"> 
/*--------------------------------- 以下4个方法 摘自网络 ----------------------------------------*/ 
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+‘\\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; 
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; 
} 

     
/*--------------------------------------------------------------------------------------------------------*/ 
/** 
* author: 王永山 
* version: 1.1 beta 
* date: 2008-09-09 
* email: [email]wangys0927@163.com[/email] 
* 
* update: 
* 1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ， 
* 2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）； 
* 3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。 
* 4. 增加了获取“被选区选中元素”的方法<a href="http://www.codesky.net" class="hden">源码天空</a>，可以点击按钮“getRegions”看效果。 
*/ 


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){ 
                                  // 清空所有select样式 
                                  _self.clearSelections(_regions); 
                                  this.className += " "+_self.selectedClass; 
                                  // 清空selected数组，并加入当前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; 
    } 
     
    // 判断一个区域是否在选择区内 
    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("共选择 "+arr.length+" 个文件，分别是：\n"+selInfo); 
         
    } 
     
        </script>     
    <body> 
<button onclick="showSelDiv();">getRegions</button> 
<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 class="fileDiv">file9</div> 
<div class="fileDiv">file10</div> 
<div class="fileDiv">file11</div> 
<div class="fileDiv">file12</div> 
<div class="fileDiv">file13</div> 
<div class="fileDiv">file14</div> 
<div class="fileDiv">file15</div> 
<div class="fileDiv">file16</div> 
<div class="fileDiv">file17</div> 
<div class="fileDiv">file18</div> 
<div class="fileDiv">file19</div> 
<div class="fileDiv">file20</div> 
<div class="fileDiv">file21</div> 
<div class="fileDiv">file22</div> 
<div class="fileDiv">file23</div> 
<div class="fileDiv">file24</div> 
<div class="fileDiv">file25</div> 
<div class="fileDiv">file26</div> 
<div class="fileDiv">file27</div> 
<div class="fileDiv">file28</div> 
<div class="fileDiv">file29</div> 
<div class="fileDiv">file30</div> 
<div class="fileDiv">file31</div> 
<div class="fileDiv">file32</div> 
<div class="fileDiv">file33</div> 
<div class="fileDiv">file34</div> 
<div class="fileDiv">file35</div> 
<div class="fileDiv">file36</div> 
<div class="fileDiv">file37</div> 
<div class="fileDiv">file38</div> 
<div class="fileDiv">file39</div> 
<div class="fileDiv">file40</div> 
<div class="fileDiv">file41</div> 
<div class="fileDiv">file42</div> 
<div class="fileDiv">file43</div> 
<div class="fileDiv">file44</div> 
<div class="fileDiv">file45</div> 
<div class="fileDiv">file46</div> 
<div class="fileDiv">file47</div> 
<div class="fileDiv">file48</div> 
<div class="fileDiv">file49</div> 
<div class="fileDiv">file50</div> 
<div class="fileDiv">file51</div> 
<div class="fileDiv">file52</div> 
<div class="fileDiv">file53</div> 
<div class="fileDiv">file54</div> 
<div class="fileDiv">file55</div> 
<div class="fileDiv">file56</div> 
<div class="fileDiv">file57</div> 
<div class="fileDiv">file58</div> 
<div class="fileDiv">file59</div> 
<div class="fileDiv">file60</div> 


<div style="float:left;width:100%;"><button onclick="showSelDiv();">getRegions</button></div> 
    </body>     
    <script> 
new RegionSelect({ 
    region:‘div.fileDiv‘, 
    selectedClass: ‘seled‘ 
}).select(); 
    </script> 
</html>
js 在页面上模拟多选，蚂蚁线线框

js 在页面上模拟多选，蚂蚁线线框,布布扣,bubuko.com

js 在页面上模拟多选，蚂蚁线线框

上一篇：js 给url添加时间戳 解决浏览器缓存


下一篇：bootstrap + angularjs + seajs构建Web Form前端(一)