JavaScript简单实现鼠标拖动选择功能


Posted in Javascript onMarch 06, 2014
<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">// <![CDATA[
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<arr.length;i++){
       selInfo += arr[i].innerHTML+"\n";
   }
   alert("共选择 "+arr.length+" 个文件,分别是:\n"+selInfo);
 }
// ]]></script>
<p><button onclick="showSelDiv();">getRegions</button></p>
<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>
<script type="text/javascript">// <![CDATA[
new RegionSelect({
     region:'div.fileDiv',
     selectedClass: 'seled'
    }).select();
// ]]></script>
Javascript 相关文章推荐
javascript椭圆旋转相册实现代码
Jan 16 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
用JS在浏览器中创建下载文件
Mar 05 #Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 #Javascript
js写的方法实现上传图片之后查看大图
Mar 05 #Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 #Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 #Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 #Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 #Javascript
You might like
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
PHP队列用法实例
2014/11/05 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
Python实现分数序列求和
2020/02/25 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
毕业生个人的求职信范文
2013/12/03 职场文书
法务专员岗位职责
2014/01/02 职场文书
团日活动总结书
2014/05/08 职场文书
了解Redis常见应用场景
2021/06/23 Redis
python Tkinter模块使用方法详解
2022/04/07 Python