Javascript实现鼠标框选操作  不是点击选取


Posted in Javascript onApril 14, 2016

本文实例为大家分享了Javascript实现鼠标框选操作,绝不是点击选取,供大家参考,具体内容如下

效果图:

Javascript实现鼠标框选操作  不是点击选取

代码:

<html> 
<head></head> 
<style> 
body{padding:100px;} 
.fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;margin-right:10px;margin-bottom:10px;} 
.seled{border:1px solid red;background-color:#D6DFF7;} 
</style> 
<script type="text/javascript">  
(function() { 
  document.onmousedown = function() { 
 
    var selList = []; 
    var fileNodes = document.getElementsByTagName("div"); 
    for ( var i = 0; i < fileNodes.length; i++) { 
      if (fileNodes[i].className.indexOf("fileDiv") != -1) { 
        fileNodes[i].className = "fileDiv"; 
        selList.push(fileNodes[i]); 
      } 
    } 
 
    var isSelect = true; 
    var evt = window.event || arguments[0]; 
    var startX = (evt.x || evt.clientX); 
    var startY = (evt.y || evt.clientY); 
    var selDiv = document.createElement("div"); 
    selDiv.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;"; 
    selDiv.id = "selectDiv"; 
    document.body.appendChild(selDiv); 
 
    selDiv.style.left = startX + "px"; 
    selDiv.style.top = startY + "px"; 
 
    var _x = null; 
    var _y = null; 
    clearEventBubble(evt); 
 
    document.onmousemove = function() { 
      evt = window.event || arguments[0]; 
      if (isSelect) { 
        if (selDiv.style.display == "none") { 
          selDiv.style.display = ""; 
        } 
        _x = (evt.x || evt.clientX); 
        _y = (evt.y || evt.clientY); 
        selDiv.style.left = Math.min(_x, startX) + "px"; 
        selDiv.style.top = Math.min(_y, startY) + "px"; 
        selDiv.style.width = Math.abs(_x - startX) + "px"; 
        selDiv.style.height = Math.abs(_y - startY) + "px"; 
 
        // ---------------- 关键算法 ---------------------  
        var _l = selDiv.offsetLeft, _t = selDiv.offsetTop; 
        var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight; 
        for ( var i = 0; i < selList.length; i++) { 
          var sl = selList[i].offsetWidth + selList[i].offsetLeft; 
          var st = selList[i].offsetHeight + selList[i].offsetTop; 
          if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) { 
            if (selList[i].className.indexOf("seled") == -1) { 
              selList[i].className = selList[i].className + " seled"; 
            } 
          } else { 
            if (selList[i].className.indexOf("seled") != -1) { 
              selList[i].className = "fileDiv"; 
            } 
          } 
        } 
 
      } 
      clearEventBubble(evt); 
    } 
 
    document.onmouseup = function() { 
      isSelect = false; 
      if (selDiv) { 
        document.body.removeChild(selDiv); 
        showSelDiv(selList); 
      } 
      selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null; 
    } 
  } 
})(); 
function clearEventBubble(evt) { 
  if (evt.stopPropagation) 
    evt.stopPropagation(); 
  else 
    evt.cancelBubble = true; 
  if (evt.preventDefault) 
    evt.preventDefault(); 
  else 
    evt.returnValue = false; 
} 
function showSelDiv(arr) { 
  var count = 0; 
  var selInfo = ""; 
  for ( var i = 0; i < arr.length; i++) { 
    if (arr[i].className.indexOf("seled") != -1) { 
      count++; 
      selInfo += arr[i].innerHTML + "\n"; 
    } 
  } 
  alert("共选择 " + count + " 个文件,分别是:\n" + selInfo); 
} 
</script> 
<body> 
  <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> 
 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
element-ui中的select下拉列表设置默认值方法
Aug 24 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
Node.js实现数据推送
Apr 14 #Javascript
node.js实现端口转发
Apr 14 #Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 #Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 #Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 #Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 #Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 #Javascript
You might like
ThinkPHP中redirect用法分析
2014/12/05 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
Vue实现购物车功能
2017/04/27 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
Python高效编程技巧
2013/01/07 Python
Python创建系统目录的方法
2015/03/11 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python使用pymysql小技巧
2017/06/04 Python
理解python中生成器用法
2017/12/20 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python实现桌面气泡提示功能
2019/07/29 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
专业实习自我鉴定
2013/10/29 职场文书
大学生毕业鉴定
2014/01/31 职场文书
妇女干部培训方案
2014/05/12 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
2014年环保局工作总结
2014/12/11 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS