jQuery customizes the box and gets the data in the box

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(&#39;mousemove&#39;);
     })
     //画框
     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>

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>

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!