Home > Developer > JavaScript
eventThe main properties involved are: MouseEvent.clientX , MouseEvent.clientY , HTMLElement.offsetLeft ,HTMLElement.offsetTop
OK, let's solve these attributes first!
Mouseevent.clientx and ClienyRepresents the horizontal and vertical distance of the mouse in the viewport when the event is triggered
Htmlelement.offsetleft and offsettopThe element ends from border to the inner border of the parent element
It's better to come up with a picture that says:
Base code:
*{ padding: 0 margin: 0 #box { height: 100px width: 100px position: absolute top: 50px left: 50px background: red
<div id="box"></div>
var=document.getElementById("box");
clientX and clientY get the position of the mouse in the viewportThe code is as follows:
//press event triggered box . onmousedown = function (e) { //click the distance to the left of the element viewport, palatability to the right of the distance var m_x = e . clientx var m_y = e . clienty }
After the mouse movement event, you can also get the position of the mouse at the viewport after the end. Because it is the move event that starts immediately after the mouse clicks. So the move event needs to be written in the Click event
code as follows:
document . onmousemove = function (e) { //moving distance, left to palatability distance, and top to palatability distance var x = e . clientx var y = e . clienty The data obtained from the previous two steps can be used to calculate the distance of the entire drag event motion. This distance allows you to set the last position of the element
code as follows:
var resultx = x- m_x var resulty = y- m_y box . style . left = resultx+ "px" //element box . style . top = resulty+ "px" //element Finally, the mouse lift event (onmouseup)
The code is as follows:
document.onmouseup=function(){ document.onmousemove=null;}First write this, to try to write the code, the effect is as follows:
There is a problem here, the first drag effect, no problem. But the second time when the mouse is pressed again, the element returns to the leftmost upper-left corner of the viewport, which is the (0,0) point of the viewport. And what I want is that when I click drag for the second time, it will start moving at the second click. That's why this happens, because there's no place to save the element after it's moved. So now you need two values to record the position of the top left vertex of the element. Then it needs offsetLeft offsetTop to be acquired.
The code is as follows:
var=this.offsetLeft; var=this.offsetTop;
box.style.left=positionx+ resultX+"px"; box.style.top=positiony+ resultY+"px";
This solves the problem that the element will no longer run to the upper-left corner of the viewport at the second move.
The entire code is as follows:
<! DOCTYPEHtml>lang="en"> <metacharset="UTF-8"> <metaname="Viewport"content="Width=device-width, initial-scale=1.0"> <metahttp-equiv="X-ua-compatible"content="Ie=edge"> <title>Document</title> <style>*{ padding: 0; margin: 0; } #box{ Height: 100px; Width: 100px; Position: Absolute; Top: 50px; Left : 50px; background: Red; } </style><body> <divid="box"></div> <script> varBox= Document.getElementById("box"); //Press the trigger time Box.onmousedown = function(e){ //Click the distance to the left of the element viewport, and the distance to the right varM_x= e.ClientX; varM_y= e.ClientY; //Do not set vertex position, I need to keep the position of element vertex every time, can use Offsetleft,offsettop varPositionx= This.offsetleft; varPositiony= This.OffsetTop; Document.onmousemove = function(e){ //moving distance, left to palatability distance, and top to palatability distance varX= e.ClientX; varY= e.ClientY; varResultx=X-M_x; varResulty=Y-M_y; Box.style. Left =Positionx+Resultx+"px"; Box.style.Top =Positiony+Resulty+"px"; } } Document.onmouseup = function(){ Document.onmousemove = NULL; } </script></body></html>I want to write a simple case to try hackers, but found that thinking and doing is two different things! You need to practice a lot.
Problems with JavaScript for drag and drop (1)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
