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 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery实现开关灯效果
Aug 02 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 session 预定义数组
2009/03/16 PHP
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python简单实现基数排序算法
2015/05/16 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
大二学生职业生涯规划书
2014/02/05 职场文书
高二语文教学反思
2016/02/16 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
一篇文章带你复习java知识点
2021/06/28 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技