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中的deferred对象和extend方法详解
May 08 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 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 5.0对象模型深度探索之对象复制
2008/03/27 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
python dumps和loads区别详解
2020/02/04 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
安全检查管理制度
2014/02/02 职场文书
新教师工作感言
2014/02/16 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
2015年三年级班主任工作总结
2015/05/21 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技