jQuery customizes the box and gets the data in the box
Apr 18, 2018 pm 03:33 PMThis 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>
<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>
Detailed explanation of using vuex Actions
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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Use ddrescue to recover data on Linux

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

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

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

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