jQuery 实现鼠标画框并对框内数据选中的实例代码


Posted in jQuery onAugust 29, 2017

jquery库:

jquery -1.10.2.min.js,jQuery UI - v1.12.1。

jQuery 代码

不多说了,之间上代码。不懂的地方看注释。

<script type="text/javascript">
 //鼠标按下时的X Y坐标
 var mouseDownX;
 var mouseDownY;
 //鼠标按下时移动的X Y 坐标
 var mouseMoveX;
 var mouseMoveY;
 //移动的状态
 var isMove = false;
 /*初始化 选择框 */
 function init() {
  $("#selected").css("display", "none");
  $("#selected").css("top", "0");
  $("#selected").css("left", "0");
  $("#selected").css("width", "0");
  $("#selected").css("height", "0");
 }
 $(document).ready(function() {
  init();
  var selectedTD = new Array();//创建被选中表格数组
  var TD = $("td");//获取所有表格信息
  for ( var i = 0; i < TD.length; i++) {
   selectedTD.push(TD[i]);
  }
  $("#tableDiv").mousedown(function(event) {
   mouseDownX = event.clientX - $(this).offset().left;;
   mouseDownY = event.clientY - $(this).offset().top;
   console.log("mouseDownX=" + mouseDownX +" mouseDownY=" + mouseDownY );
   if(event.target.id.match(/selected/)) {
    isMove = true;
   }
   //鼠标按下并移动时进行判断(拖拽 or 画框)
   $("#tableDiv").mousemove(function(event) {
    mouseMoveX = event.clientX - $(this).offset().left;
    mouseMoveY = event.clientY - $(this).offset().top;
    var selectDiv = document.getElementById("selected");
    if (isMove) {
     //拖拽的代码,因为实在不想算 xy 了,所以使用了jquery ui
     $("#selected").draggable();
     //这部分是负责画框的时候,实时把框住的表格变色的,(代码和下面的代码重复了)
     var left = selectDiv.offsetLeft, top = selectDiv.offsetTop; width = selectDiv.offsetWidth, height = selectDiv.offsetHeight;
     for ( var i = 0; i < selectedTD.length; i++) {
      var sl = selectedTD[i].offsetWidth + selectedTD[i].offsetLeft;
      var st = selectedTD[i].offsetHeight + selectedTD[i].offsetTop;
      if (sl > left && st > top && selectedTD[i].offsetLeft < left + width && selectedTD[i].offsetTop < top + height) {
       if (selectedTD[i].className.indexOf("selected") == -1) {
        selectedTD[i].className = "selected";
       }
      } else { 
       if (selectedTD[i].className.indexOf("selected") != -1) { 
        selectedTD[i].className = "TD"; 
       }
      }
     }
    } else {
     //重复的代码,完了再把它抽取出来
     var left = selectDiv.offsetLeft, top = selectDiv.offsetTop; width = selectDiv.offsetWidth, height = selectDiv.offsetHeight;
     for ( var i = 0; i < selectedTD.length; i++) {
      var sl = selectedTD[i].offsetWidth + selectedTD[i].offsetLeft;
      var st = selectedTD[i].offsetHeight + selectedTD[i].offsetTop;
      if (sl > left && st > top && selectedTD[i].offsetLeft < left + width && selectedTD[i].offsetTop < top + height) {
       if (selectedTD[i].className.indexOf("selected") == -1) {
        selectedTD[i].className = "selected";
       }
      } else {
       if (selectedTD[i].className.indexOf("selected") != -1) { 
        selectedTD[i].className = "TD"; 
       }
      }
     }
     //鼠标抬起结束画框,和拖动
     $("#tableDiv").mouseup(function() {
      console.log("mouseUpX=" + mouseMoveX + " mouseUpY=" + mouseMoveX);
      isMove = false;
      $(this).unbind('mousemove');
     })
     //画框
     displaySelected(mouseDownY, mouseDownX, mouseMoveX, mouseMoveY);
    }
   })
  })
  //当鼠标在已经画好的框上时,改变鼠标指针样式,就是十字形了
  $("#selected").mouseenter(function() {
   $("#selected").css("cursor", "move");
  });
 });
 function displaySelected(mouseDownY, mouseDownX, mouseUpX, mouseUpY) {
  $("#selected").css("display", "block");
  $("#selected").css("top", mouseDownY);
  $("#selected").css("left", mouseDownX);
  var moveX = mouseMoveX - mouseDownX;
  var moveY = mouseMoveY - mouseDownY;
  if (moveY < 0) {
    $("#selected").css("top", event.clientY - $("#table").offset().top);
  }
  if (moveX < 0) {
   $("#selected").css("left", event.clientX - $("#table").offset().left);
  }
  $("#selected").css("width", Math.abs(moveX));
  $("#selected").css("height", Math.abs(moveY));
 }
 </script>

测试用的html

使用table进行的测试:

<div id="tableDiv" style="width: 1500px; height: 1500px;top: 100px; left:100px; position: absolute;">
  <div id="selected" style="border:5px dotted rgb(239, 37, 17);position: absolute;display: none;"></div>
  <table border="1" style=" width: 1500px; height: 1500px;" id="table">
  <tr>
   <td id="1" class="TD"></td>
   <td id="2" class="TD"></td>
   <td id="3" class="TD"></td>
   <td id="4" class="TD"></td>
   <td id="5" class="TD"></td>
   <td id="6" class="TD"></td>
  </tr>
  <tr>
   <td id="7" class="TD"></td>
   <td id="8" class="TD"></td>
   <td id="9" class="TD"></td>
   <td id="10" class="TD"></td>
   <td id="11" class="TD"></td>
   <td id="12" class="TD"></td>
  </tr>
  <tr>
   <td id="1" class="TD"></td>
   <td id="2" class="TD"></td>
   <td id="3" class="TD"></td>
   <td id="4" class="TD"></td>
   <td id="5" class="TD"></td>
   <td id="6" class="TD"></td>
  </tr>
  </table>
 <!--表格代码太多所以...-->
 </div>

效果图

jQuery 实现鼠标画框并对框内数据选中的实例代码

以上所述是小编给大家介绍的jQuery 实现鼠标画框并对框内数据选中的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jquery插件实现悬浮的菜单
Apr 24 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 #jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 #jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 #jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 #jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 #jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 #jQuery
You might like
PHP 处理图片的类实现代码
2009/10/23 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
js转义字符介绍
2013/11/05 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
Python MD5文件生成码
2009/01/12 Python
简单介绍Python中的round()方法
2015/05/15 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
python使用生成器实现可迭代对象
2018/03/20 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
执行Python程序时模块报错问题
2020/03/26 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
高级工程师英文求职信
2014/03/19 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
开票证明
2015/06/23 职场文书