Home Web Front-end JS Tutorial jQuery customizes the box and gets the data in the box

jQuery customizes the box and gets the data in the box

Apr 18, 2018 pm 03:33 PM
jquery data customize

This time I will bring you jQuery custom box and get the data in the box. What are the precautions for jQuery custom box and get the data in the box? The following is a practical case, let's take a look.

jquery library:

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

jQuery Code

Not much more to say, let’s get into the code. If you don’t understand something, read the comments.

<script type="text/javascript">
 //鼠标按下时的X Y坐标
 varmouseDownX;
 varmouseDownY;
 //鼠标按下时移动的X Y 坐标
 varmouseMoveX;
 varmouseMoveY;
 //移动的状态
 varisMove =false;
 /*初始化 选择框 */
 functioninit() {
  $("#selected").css("display","none");
  $("#selected").css("top","0");
  $("#selected").css("left","0");
  $("#selected").css("width","0");
  $("#selected").css("height","0");
 }
 $(document).ready(function() {
  init();
  varselectedTD =newArray();//创建被选中表格数组
  varTD = $("td");//获取所有表格信息
  for(vari = 0; i < TD.length; i++) {
   selectedTD.push(TD[i]);
  }
  $("#tablep").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 画框)
   $("#tablep").mousemove(function(event) {
    mouseMoveX = event.clientX - $(this).offset().left;
    mouseMoveY = event.clientY - $(this).offset().top;
    varselectp = document.getElementById("selected");
    if(isMove) {
     //拖拽的代码,因为实在不想算 xy 了,所以使用了jquery ui
     $("#selected").draggable();
     //这部分是负责画框的时候,实时把框住的表格变色的,(代码和下面的代码重复了)
     varleft = selectp.offsetLeft, top = selectp.offsetTop; width = selectp.offsetWidth, height = selectp.offsetHeight;
     for(vari = 0; i < selectedTD.length; i++) {
      varsl = selectedTD[i].offsetWidth + selectedTD[i].offsetLeft;
      varst = 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{
     //重复的代码,完了再把它抽取出来
     varleft = selectp.offsetLeft, top = selectp.offsetTop; width = selectp.offsetWidth, height = selectp.offsetHeight;
     for(vari = 0; i < selectedTD.length; i++) {
      varsl = selectedTD[i].offsetWidth + selectedTD[i].offsetLeft;
      varst = 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";
       }
      }
     }
     //鼠标抬起结束画框,和拖动
     $("#tablep").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");
  });
 });
 functiondisplaySelected(mouseDownY, mouseDownX, mouseUpX, mouseUpY) {
  $("#selected").css("display","block");
  $("#selected").css("top", mouseDownY);
  $("#selected").css("left", mouseDownX);
  varmoveX = mouseMoveX - mouseDownX;
  varmoveY = 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>
Copy after login
HTML for testing

Test using table:

<p id="tablep"style="width: 1500px; height: 1500px;top: 100px; left:100px; position: absolute;">
  <p id="selected"style="border:5px dotted rgb(239, 37, 17);position: absolute;display: none;"></p>
  <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>
 <!--表格代码太多所以...-->
 </p>
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of using vuex Actions

##Detailed explanation of jQuery implementation of timer function


How to set up js to prohibit repeated submission of forms


The above is the detailed content of jQuery customizes the box and gets the data in the box. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Use ddrescue to recover data on Linux Use ddrescue to recover data on Linux Mar 20, 2024 pm 01:37 PM

Use ddrescue to recover data on Linux

Open source! Beyond ZoeDepth! DepthFM: Fast and accurate monocular depth estimation! Open source! Beyond ZoeDepth! DepthFM: Fast and accurate monocular depth estimation! Apr 03, 2024 pm 12:04 PM

Open source! Beyond ZoeDepth! DepthFM: Fast and accurate monocular depth estimation!

Google is ecstatic: JAX performance surpasses Pytorch and TensorFlow! It may become the fastest choice for GPU inference training Google is ecstatic: JAX performance surpasses Pytorch and TensorFlow! It may become the fastest choice for GPU inference training Apr 01, 2024 pm 07:46 PM

Google is ecstatic: JAX performance surpasses Pytorch and TensorFlow! It may become the fastest choice for GPU inference training

The vitality of super intelligence awakens! But with the arrival of self-updating AI, mothers no longer have to worry about data bottlenecks The vitality of super intelligence awakens! But with the arrival of self-updating AI, mothers no longer have to worry about data bottlenecks Apr 29, 2024 pm 06:55 PM

The vitality of super intelligence awakens! But with the arrival of self-updating AI, mothers no longer have to worry about data bottlenecks

Slow Cellular Data Internet Speeds on iPhone: Fixes Slow Cellular Data Internet Speeds on iPhone: Fixes May 03, 2024 pm 09:01 PM

Slow Cellular Data Internet Speeds on iPhone: Fixes

The U.S. Air Force showcases its first AI fighter jet with high profile! The minister personally conducted the test drive without interfering during the whole process, and 100,000 lines of code were tested for 21 times. The U.S. Air Force showcases its first AI fighter jet with high profile! The minister personally conducted the test drive without interfering during the whole process, and 100,000 lines of code were tested for 21 times. May 07, 2024 pm 05:00 PM

The U.S. Air Force showcases its first AI fighter jet with high profile! The minister personally conducted the test drive without interfering during the whole process, and 100,000 lines of code were tested for 21 times.

The first robot to autonomously complete human tasks appears, with five fingers that are flexible and fast, and large models support virtual space training The first robot to autonomously complete human tasks appears, with five fingers that are flexible and fast, and large models support virtual space training Mar 11, 2024 pm 12:10 PM

The first robot to autonomously complete human tasks appears, with five fingers that are flexible and fast, and large models support virtual space training

Alibaba 7B multi-modal document understanding large model wins new SOTA Alibaba 7B multi-modal document understanding large model wins new SOTA Apr 02, 2024 am 11:31 AM

Alibaba 7B multi-modal document understanding large model wins new SOTA

See all articles