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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
jQuery实现可以扩展的日历
Dec 01 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使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
js常用代码段整理
2011/11/30 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
python中如何打包用户自定义模块
2020/09/23 Python
python实现按日期归档文件
2021/01/30 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
学术会议主持词
2014/03/17 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
创业计划书之家政服务
2019/09/18 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
Python实现位图分割的效果
2021/11/20 Python