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-世界上误解最深的语言分析
Aug 12 Javascript
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
javascript获取以及设置光标位置
Feb 16 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 Javascript
用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函数代码
2010/04/22 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
使用正则替换变量
2007/05/05 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python 备份程序代码实现
2017/03/06 Python
python分布式编程实现过程解析
2019/11/08 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
国家助学金获奖感言
2014/01/31 职场文书
超市国庆节促销方案
2014/02/20 职场文书
股份转让协议书
2014/04/12 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
经费申请报告
2015/05/15 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技