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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
js读取配置文件自写
Feb 11 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
vue实现计算器功能
Feb 22 Javascript
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
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP实现货币换算的方法
2014/11/29 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
自制PHP框架之设计模式
2017/05/07 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
Prototype Selector对象学习
2009/07/23 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python+django实现简单的文件上传
2016/08/17 Python
基于python socketserver框架全面解析
2017/09/21 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
abstract是什么意思
2012/02/12 面试题
机关单位人员学雷锋心得体会
2014/03/10 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
培训后的感想
2015/08/07 职场文书
银行培训心得体会范文
2016/01/09 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers