This article mainly introduces the implementation of simple mouse drag effects in javascript. The example analyzes the key points and implementation skills related to the javascript mouse drag effect, which is of great practical value, for more information about how to use javascript, see the following example. Share it with you for your reference. The specific analysis is as follows:
It is common to drag an element to any position on a webpage. For example, you can drag the part of a blog template to the corresponding position by yourself.
Next, we will write a simple example to achieve the effect of dragging the mouse.
When the mouse is pressed, the difference between the current position of the mouse and the left distance of the element is recorded.
When the mouse moves, assign a value to the position of the element, that is, the position of the mouse, minus the difference.
When the mouse is opened, assign null values to the mouse movement and mouse release, so that they do not have any action.
Key Aspect 1:
disx = oevent.clientX - box.offsetLeft;
Make sure that the cursor points at the element position when dragging, that is, the distance between the mouse position and the left of the element.
Key Aspect 2:
box.style.left = oevent.clientX - disx + "px";
The position of the element when dragging. The current position of the mouse minus the previously calculated value.
Okay. The Code is as follows:
Untitled documentScript window. onload = function () {var box = document. getElementById ("box"); var disx = 0; var disy = 0; box. onmousedown = function (evt) {var oevent = evt | window. event; disx = oevent. clientX-box. offsetLeft; disy = oevent. clientY-box. offsetTop; document. onmousemove = function (evt) {var oevent = evt | window. event; box. style. left = oevent. clientX-disx + "px"; box. style. top = oevent. clientY-disy + "px";} document. onmouseup = function () {document. onmousemove = null; document. onmouseup = null;} return false;} scriptDrag the mouse
Then, there is no limit on the range of the above mouse drag, and sometimes it will be invisible outside the window. The following limits the scope.
Key Aspect 1: If the left position of an element is less than 0, assign a value of 0 to it. If the value is greater than the window size and the width of the element, assign a value to the difference between the window size and the element width.
Var boxl = oevent. clientX-disx; if (boxl <0) {boxl = 0;} else if (boxl> vieww-box. offsetWidth) {boxl = vieww-box. offsetWidth ;}
Untitled documentScript window. onload = function () {var box = document. getElementById ("box"); var disx = 0; var disy = 0; box. onmousedown = function (evt) {var oevent = evt | window. event; disx = oevent. clientX-box. offsetLeft; disy = oevent. clientY-box. offsetTop; document. onmousemove = function (evt) {var oevent = evt | window. event; var boxl = oevent. clientX-disx; var boxt = oevent. clientY-disy var vieww = document.doc umentElement. clientWidth | document. body. clientWidth; var viewh = document.doc umentElement. clientHeight | document. body. clientHeight; if (boxl <0) {boxl = 0;} else if (boxl> vieww-box. offsetWidth) {boxl = vieww-box. offsetWidth;} if (boxt <0) {boxt = 0;} else if (boxt> viewh-box. offsetHeight) {boxt = viewh-box. offsetHeight;} box. style. left = boxl + "px"; box. style. top = boxt + "px";} document. onmouseup = function () {document. onmousemove = null; document. onmouseup = null;} return false;} scriptDrag the mouse
I hope this article will help you design javascript programs.