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('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 AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

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

DDREASE is a tool for recovering data from file or block devices such as hard drives, SSDs, RAM disks, CDs, DVDs and USB storage devices. It copies data from one block device to another, leaving corrupted data blocks behind and moving only good data blocks. ddreasue is a powerful recovery tool that is fully automated as it does not require any interference during recovery operations. Additionally, thanks to the ddasue map file, it can be stopped and resumed at any time. Other key features of DDREASE are as follows: It does not overwrite recovered data but fills the gaps in case of iterative recovery. However, it can be truncated if the tool is instructed to do so explicitly. Recover data from multiple files or blocks to a single

0.What does this article do? We propose DepthFM: a versatile and fast state-of-the-art generative monocular depth estimation model. In addition to traditional depth estimation tasks, DepthFM also demonstrates state-of-the-art capabilities in downstream tasks such as depth inpainting. DepthFM is efficient and can synthesize depth maps within a few inference steps. Let’s read about this work together ~ 1. Paper information title: DepthFM: FastMonocularDepthEstimationwithFlowMatching Author: MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr

The performance of JAX, promoted by Google, has surpassed that of Pytorch and TensorFlow in recent benchmark tests, ranking first in 7 indicators. And the test was not done on the TPU with the best JAX performance. Although among developers, Pytorch is still more popular than Tensorflow. But in the future, perhaps more large models will be trained and run based on the JAX platform. Models Recently, the Keras team benchmarked three backends (TensorFlow, JAX, PyTorch) with the native PyTorch implementation and Keras2 with TensorFlow. First, they select a set of mainstream

Facing lag, slow mobile data connection on iPhone? Typically, the strength of cellular internet on your phone depends on several factors such as region, cellular network type, roaming type, etc. There are some things you can do to get a faster, more reliable cellular Internet connection. Fix 1 – Force Restart iPhone Sometimes, force restarting your device just resets a lot of things, including the cellular connection. Step 1 – Just press the volume up key once and release. Next, press the Volume Down key and release it again. Step 2 – The next part of the process is to hold the button on the right side. Let the iPhone finish restarting. Enable cellular data and check network speed. Check again Fix 2 – Change data mode While 5G offers better network speeds, it works better when the signal is weaker

The latest video of Tesla's robot Optimus is released, and it can already work in the factory. At normal speed, it sorts batteries (Tesla's 4680 batteries) like this: The official also released what it looks like at 20x speed - on a small "workstation", picking and picking and picking: This time it is released One of the highlights of the video is that Optimus completes this work in the factory, completely autonomously, without human intervention throughout the process. And from the perspective of Optimus, it can also pick up and place the crooked battery, focusing on automatic error correction: Regarding Optimus's hand, NVIDIA scientist Jim Fan gave a high evaluation: Optimus's hand is the world's five-fingered robot. One of the most dexterous. Its hands are not only tactile

I cry to death. The world is madly building big models. The data on the Internet is not enough. It is not enough at all. The training model looks like "The Hunger Games", and AI researchers around the world are worrying about how to feed these data voracious eaters. This problem is particularly prominent in multi-modal tasks. At a time when nothing could be done, a start-up team from the Department of Renmin University of China used its own new model to become the first in China to make "model-generated data feed itself" a reality. Moreover, it is a two-pronged approach on the understanding side and the generation side. Both sides can generate high-quality, multi-modal new data and provide data feedback to the model itself. What is a model? Awaker 1.0, a large multi-modal model that just appeared on the Zhongguancun Forum. Who is the team? Sophon engine. Founded by Gao Yizhao, a doctoral student at Renmin University’s Hillhouse School of Artificial Intelligence.

This week, FigureAI, a robotics company invested by OpenAI, Microsoft, Bezos, and Nvidia, announced that it has received nearly $700 million in financing and plans to develop a humanoid robot that can walk independently within the next year. And Tesla’s Optimus Prime has repeatedly received good news. No one doubts that this year will be the year when humanoid robots explode. SanctuaryAI, a Canadian-based robotics company, recently released a new humanoid robot, Phoenix. Officials claim that it can complete many tasks autonomously at the same speed as humans. Pheonix, the world's first robot that can autonomously complete tasks at human speeds, can gently grab, move and elegantly place each object to its left and right sides. It can autonomously identify objects

New SOTA for multimodal document understanding capabilities! Alibaba's mPLUG team released the latest open source work mPLUG-DocOwl1.5, which proposed a series of solutions to address the four major challenges of high-resolution image text recognition, general document structure understanding, instruction following, and introduction of external knowledge. Without further ado, let’s look at the effects first. One-click recognition and conversion of charts with complex structures into Markdown format: Charts of different styles are available: More detailed text recognition and positioning can also be easily handled: Detailed explanations of document understanding can also be given: You know, "Document Understanding" is currently An important scenario for the implementation of large language models. There are many products on the market to assist document reading. Some of them mainly use OCR systems for text recognition and cooperate with LLM for text processing.
