JavaScript模仿鼠标拖动选择功能

2024-09-05 12:22:16

字体：大中小

来源：转载

供稿：网友

JavaScript模仿鼠标拖动选择功能，就是类似WINODWS系统一样的选择功能，选多选少由你自己控制，鼠标点选也可以，值得学习一番。针对前2个beta版，该版本进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）；增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。增加了获劝被选区选中元素”的方法，可以点击按钮“getRegions”看效果。

<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">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;}   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  <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 style="float:left;width:100%;"><button onclick="showSelDiv();">getRegions</button></div> </body>  <script>    new RegionSelect({     region:'div.fileDiv',     selectedClass: 'seled'    }).select(); </script></html>

上一篇：围绕鼠标跟随的旋转星空JS特效

下一篇：鼠标跟随——三色彩带特效