Javascript tips-JS tutorial

This article mainly introduces how to implement JavaScript mouse drag and drop. It provides examples to analyze JavaScript mouse events and techniques related to dynamic conversion of page element attributes. It has some reference value, for more information, see the example in this article. We will share this with you for your reference. The details are as follows:

JS Code:

Script window. onload = function () {var oDiv = document. getElementById ('P'); var disX = 0; var disY = 0; oDiv. onmousedown = function (ev) // press DIV {var oEvent = ev | event; disX = oEvent. clientX-oDiv.offsetLeft; // The X coordinate of the mouse minus the left margin of the DIV is equal to disX, which is used to determine the left distance between the mouse and the DIV when the mouse moves the DIV, this distance will not change. After the X coordinate of the new mouse is subtracted, disX is the Left disY = oEvent of the div. clientY-oDiv.offsetTop; // The Y coordinate of the mouse minus the left margin of the DIV is equal to disY, which is used to determine the above distance between the mouse and the DIV when the mouse moves the DIV, this distance will not change. Using the Y coordinate of the new mouse minus disY is the Top document of the DIV. onmousemove = function (ev) // to prevent the mouse from moving too fast and leaving the DIV produces a bug, you need to add the onmousemove event {var oEvent = ev | event; var oLeft = oEvent. clientX-disX; // The coordinates of the new mouse X minus disX, that is, the Left var oTop = oEvent after the mouse moves the DIV. clientY-disY; // The Y coordinate of the new mouse minus disY, that is, the Top if (oLeft <0) after the cursor moves the DIV. // when the Left of the DIV is less than 0, that is, remove the Left {oLeft = 0; // you can set Left of the DIV to 0, so you cannot remove the Left} else if (oLeft> document.doc umentElement. clientWidth-oDiv.offsetWidth) // screen width minus the DIV width to get the DIV to the rightmost width, if Left is greater than this pixel {oleft?document.doc umentElement. clientWidth-oDiv.offsetWidth; // set Left To this pixel} if (oTop <0) // when the DIV To is smaller than 0, that is, remove the Left {oTop = 0; // set the Top of the DIV to 0, and you cannot remove the above} else if (oTop> document.doc umentElement. clientHeight-oDiv.offsetHeight) // screen height minus the DIV height to get the DIV to reach the bottom side of the pixel, if the Top is greater than this pixel {otop?document.doc umentElement. clientHeight-oDiv.offsetHeight; // set Top to this pixel} oDiv. style. left = oLeft + 'px '; // set the Left of the DIV to the new mouse X coordinate minus the disX value oDiv. style. top = oTop + 'px '; // The Top Of The DIV is set to the new mouse Y coordinate minus the disY value}; document. onmouseup = function () // when the mouse is released {document. onmousemove = null; // move the mouse clearly to document. onmouseup = null; // clear the mouse}; return false; // block FireFox's default event bug}; script

Complete code:

 Untitled documentScript window. onload = function () {var oDiv = document. getElementById ('P'); var disX = 0; var disY = 0; oDiv. onmousedown = function (ev) // press DIV {var oEvent = ev | event; disX = oEvent. clientX-oDiv.offsetLeft; // The X coordinate of the mouse minus the left margin of the DIV is equal to disX, which is used to determine the left distance between the mouse and the DIV when the mouse moves the DIV, this distance will not change. After the X coordinate of the new mouse is subtracted, disX is the Left disY = oEvent of the div. clientY-oDiv.offsetTop; // The Y coordinate of the mouse minus the left margin of the DIV is equal to disY, which is used to determine the above distance between the mouse and the DIV when the mouse moves the DIV, this distance will not change. Using the Y coordinate of the new mouse minus disY is the Top document of the DIV. onmousemove = function (ev) // to prevent the mouse from moving too fast and leaving the DIV produces a bug, you need to add the onmousemove event {var oEvent = ev | event; var oLeft = oEvent. clientX-disX; // The coordinates of the new mouse X minus disX, that is, the Left var oTop = oEvent after the mouse moves the DIV. clientY-disY; // The Y coordinate of the new mouse minus disY, that is, the Top if (oLeft <0) after the cursor moves the DIV. // when the Left of the DIV is less than 0, that is, remove the Left {oLeft = 0; // you can set Left of the DIV to 0, so you cannot remove the Left} else if (oLeft> document.doc umentElement. clientWidth-oDiv.offsetWidth) // screen width minus the DIV width to get the DIV to the rightmost width, if Left is greater than this pixel {oleft?document.doc umentElement. clientWidth-oDiv.offsetWidth; // set Left To this pixel} if (oTop <0) // when the DIV To is smaller than 0, that is, remove the Left {oTop = 0; // set the Top of the DIV to 0, and you cannot remove the above} else if (oTop> document.doc umentElement. clientHeight-oDiv.offsetHeight) // screen height minus the DIV height to get the DIV to reach the bottom side of the pixel, if the Top is greater than this pixel {otop?document.doc umentElement. clientHeight-oDiv.offsetHeight; // set Top to this pixel} oDiv. style. left = oLeft + 'px '; // set the Left of the DIV to the new mouse X coordinate minus the disX value oDiv. style. top = oTop + 'px '; // The Top Of The DIV is set to the new mouse Y coordinate minus the disY value}; document. onmouseup = function () // when the mouse is released {document. onmousemove = null; // move the mouse clearly to document. onmouseup = null; // clear the mouse}; return false; // block FireFox's default event bug}; script

I hope this article will help you design JavaScript programs.