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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
基于Jquery的实现回车键Enter切换焦点
Sep 14 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
vue+element实现表单校验功能
May 20 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中array_multisort对多维数组排序的方法
2020/06/21 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
js如何打印object对象
2015/10/16 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
python实现中文输出的两种方法
2015/05/09 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python设置值及NaN值处理方法
2018/07/03 Python
在vscode中配置python环境过程解析
2019/09/28 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
利用python绘制正态分布曲线
2021/01/04 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
财务科科长岗位职责
2014/03/10 职场文书
六五普法规划实施方案
2014/03/21 职场文书
物业管理专业自荐信
2014/07/01 职场文书
会计学习心得体会
2014/09/09 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
中学社团活动总结
2015/05/07 职场文书
小学庆六一主持词
2015/06/30 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis