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 相关文章推荐
DOM精简教程
Oct 03 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
js函数调用常用方法详解
Dec 03 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 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
SONY SRF-M100的电路分析
2021/03/02 无线电
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
使用javascript插入样式
2016/03/14 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python模拟三级菜单效果
2017/09/11 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python多线程http压力测试脚本
2019/06/25 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
车辆安全检查制度
2014/01/12 职场文书
学历公证委托书
2014/04/09 职场文书
作息时间调整通知
2015/04/22 职场文书
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers