jQuery personnalise la boîte et récupère les données dans la boîte

Cette fois, je vais vous apporter une boîte personnalisée jQuery et récupérer les données dans la boîte. Quelles sont les précautions concernant la boîte personnalisée jQuery et l'obtention des données dans la boîte. Ce qui suit est un cas pratique, commençons. jetez un oeil.

bibliothèque jquery :

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

Code jQuery

Pas grand chose à dire, entrons dans le code. Si vous ne comprenez pas quelque chose, lisez les commentaires.

<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 pour tester

Test à l'aide d'un tableau :

<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée de l'utilisation de vuex+Actions

Explication détaillée de l'implémentation jQuery de la fonction timer

Comment configurer js pour interdire la soumission répétée de formulaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!