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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
Aug 02 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
js实现简单的倒计时
Jan 28 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不用递归实现无限分级的例子分享
2014/04/18 PHP
php生成动态验证码gif图片
2015/10/19 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
纯js实现手风琴效果
2020/04/17 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
Angular数据绑定机制原理
2018/04/17 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
python单例模式实例分析
2015/04/08 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python word转pdf代码实例
2019/08/16 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
香港化妆品经销商:我的公主
2016/08/05 全球购物
游戏商店:Eneba
2020/04/25 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
关于环保的建议书
2014/05/12 职场文书
人事专员岗位说明书
2014/07/29 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
晶体管单管来复再生式收音机
2021/04/22 无线电
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL