Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use JavaScript to achieve the mouse drag effect of div". In daily operation, I believe many people have doubts about how to use JavaScript to achieve the mouse drag effect of div. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to use JavaScript to achieve the mouse drag effect of div". Next, please follow the editor to study!

Implementation principle when the mouse is pressed according to the onmousemove event to dynamically obtain the mouse coordinate position to update the position of the div, the premise of the realization is that div must have a positioning effect, otherwise it can not be moved.

HTML

CSS style

.box {position: absolute; width: 200px; height: 200px; background: red;}

First of all, let's analyze the requirement, which is that you can move and change the position of div on the page only if you press the mouse when you click. Release the mouse and you can no longer move. So there are three mouse states here, namely, mouse down when clicking (mousedown event), moving (mousemove event), and releasing (mouseup event).

So there are three events in the js section.

JS part

Var box = document.getElementsByClassName ("box") [0]; / / get the element var x, the coordinates of the storage div var isDrop = false;// move state to determine the moving state of the mouse.

When the mouse is pressed

Box.onmousedown = function (e) {var e = e | | window.event;// uses the event object to get the mouse position x = e.clientX-box.offsetLeft; y = e.clientY-box.offsetTop; isDrop = true;// set to true to indicate that it can be moved}

The position of the x-axis of the e.clientX mouse, the position of the Y-axis of the e.clientY mouse, box.offsetLeft gets the distance from the left side of the div, and box.offsetTop gets the distance above the div distance.

As shown in the e.clientX-box.offsetLeft below, we can get the deviation between the coordinate point x and the box.offsetLeft. We need to use the coordinate point x to subtract the deviation value is the real distance of the div relative to the left, and the e.clientY-box.offsetTop analogy is the distance from the upper offset.

When the mouse moves

In case the mouse moves too fast, the event cannot be handled correctly, so the event is bound to the document

_ document.onmousemove = function (e) {/ / whether it is removable if (isDrop) {var e = e | | window.event; var moveX = e.clientX-x bang bang / get the distance left moving distance var moveY = e.clientY-y / / get the moving distance above the distance box.style.left = moveX + "px"; box.style.top = moveY + "px";} else {return;}}

The e.clientX-x mouse punctuation coordinates subtract the deviation to get the distance to the left of the div distance, and the e.clientY-y mouse punctuation coordinates minus the deviation to get the distance above the div distance. Reassign the left,top of div

When the mouse is released

In order to place the mouse moving too fast and the time cannot be handled correctly, the event is bound to the document

_ document.onmouseup = function () {isDrop = false;// set to false immovable}

Now that div can be dragged and dropped, you still need to add a scope limit, otherwise div will be dragged out of the page, so you have to add scope limit. The maximum moving width of div is the page width minus the width of div, the minimum is zero, the maximum height is the page height minus the height of div, and the minimum is zero. So the scope limit should be written like this.

_ document.onmousemove = function (e) {var e = e | | window.event; if (is) {var moveX = e.clientX-x; var moveY = e.clientY-y; var maxX = document.documentElement.clientWidth-box.offsetWidth;//X axis maximum movable distance var maxY = document.documentElement.clientHeight-box.offsetHeight / / the maximum movable distance of the Y axis / / the range is limited to the minimum, the maximum and the minimum if (moveX

< 0) { moveX=0 }else if(moveX>

MaxX) {moveX=maxX;} if (moveY

< 0) { moveY=0; }else if(moveY>

MaxY) {moveY=maxY;} box.style.left = moveX + "px"; box.style.top = moveY + "px";} else {return;}}

The effect is achieved perfectly, but we can still do it when the scope is limited.

The scope limit can be expressed in this way.

/ / range limit, minimum, maximum, maximum, minimum if (moveX

< 0) { moveX= Math.max(0,moveX)//0 }else if(moveX>

MaxX) {moveX=Math.min (moveX,maxX); / / maxX} if (moveY

< 0) { moveY= Math.max(0,moveY) //0 }else if(moveY>

MaxY) {moveY=Math.min (moveY,maxY); / / maxY}

So we can write like this.

MoveX=Math.min (maxX, Math.max (0memmoveX)); moveY=Math.min (maxY, Math.max (0memmoveY))

And then complete the code.

.box {position: absolute; width: 200px; height: 200px; background: red;} var box = document.getElementsByClassName ("box") [0]; / / get elements var x, y / / the mouse is relative to the left side of the div, the upper offset var isDrop = false; / / to determine the state of movement box.onmousedown = function (e) {var e = e | | window.event; / / the event object is used to get the mouse position x = e.clientX-box.offsetLeft Y = e.clientY-box.offsetTop; isDrop = true / / set to true to indicate that it can be moved} _ document.onmousemove = function (e) {/ / whether it is removable if (isDrop) {var e = e | | window.event Var moveX = e.clientX-x; / / get the distance left moving distance var moveY = e.clientY-y; / / get the distance above the moving distance / / maximum movable distance var maxX = document.documentElement.clientWidth-box.offsetWidth Var maxY = document.documentElement.clientHeight-box.offsetHeight; / / range limit when the moving distance is minimum and the maximum moving distance is maximum, take the minimum / / range limit method 1 / * if (moveX

< 0) { moveX = 0 } else if(moveX >

MaxX) {moveX = maxX;} if (moveY

< 0) { moveY = 0; } else if(moveY >

MaxY) {moveY= maxY;} * / / scope limiting method 2: moveX=Math.min (maxX, Math.max (0memmoveX); moveY=Math.min (maxY, Math.max (0memmoveY)) Box.style.left = moveX + "px"; box.style.top = moveY + "px";} else {return }} _ document.onmouseup = function () {isDrop = false; / / set to false immovable} at this point, the study on "how to use JavaScript to achieve the mouse drag effect of div" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.