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 相关文章推荐
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
微信小程序实现音乐播放页面布局
2020/12/11 Javascript
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
详解python 内存优化
2020/08/17 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
请解释在new与override的区别
2012/10/29 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
导购员的岗位职责
2014/02/08 职场文书
财政专业求职信范文
2014/02/19 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
团支部推优材料
2014/05/21 职场文书
酒店员工培训方案
2014/06/02 职场文书
施工单位安全责任书
2014/07/24 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
2015年公司工作总结
2015/04/25 职场文书
党性修养心得体会2016
2016/01/21 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android