How to make similar msn (QQ) web pages in the drag effect (a) http://blog.csdn.net/BlueDestiny/archive/2006/05/25/755189.aspx
Because of the length of the article, the scores are clearly written.
Next, let's talk about it.
We follow the above ideas to write code step by step
I. About coordinates event. clientX and event. clientY, but why not use event. x and event. y. I will write it clearly later, but it has already been written. I will post it as soon as possible. Transfer to the subject for reference.
ClientX sets or obtains the x coordinates of the mouse pointer position relative to the client area of the window. The client area does not include the control and scroll bar of the window.
ClientY sets or obtains the y coordinate of the mouse pointer position relative to the client area of the window. The client area does not include the control and scroll bar of the window.
2. Get the coordinates of the dragged object. Use the following code to obtain the absolute coordinates. Parameter e is the drag object, which is passed in when the function is used. Returns the array Association of X, Y, width, and length of the object. Why do we need to use iteration to find offsetLeft and offsetTop? Because they are relative to the parent coordinate, absolute positioning must be obtained through loops.
Function Offset (e ){
Var t = e. offsetTop;
Var l = e. offsetLeft;
Var w = e. offsetWidth;
Var h = e. offsetHeight;
While (e = e. offsetParent ){
T + = e. offsetTop;
L + = e. offsetLeft;
}
Return {t: t, l: l, w: w, h: h}
};
3. Use an event to trigger the program handle.
Obj. onmouseover = function (){
// To do; never-online Demo
};
Obj. onmousedown = function (){
// To do; never-online Demo
}
Obj. onmousemove = function (){
// To do; never-online Demo
}
Obj. onmouseup = function (){
// To do; never-online Demo
}
4. Get the coordinates when dragging.
Obj. onmousedown = function (){
// Remember the original coordinates when you press the button. Never-online Demo
Obj. X = event. clientX-Offset (obj). l;
Obj. Y = event. clientY-Offset (obj). t;
}
Obj. onmousemove = function (){
New coordinates minus Old Coordinates get current position never-online Demo
Obj. style. left = event. clientX-obj. X;
Obj. style. top = event. clientY-obj. Y;
}
5. Look at the complete simple drag layer code.
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <br/> <HTML> <br/> <HEAD> <br/> <TITLE> how to make a drag division-http://www.never-online.net </TITLE> <br/> <meta name = "Generator" CONTENT = "EditPlus"> <br/> <meta name = "Author" CONTENT = "never-online, blueDestiny "> <br/> <meta name =" Keywords "CONTENT =" never-online, blueDestiny "> <br/> <meta name =" Description "CONTENT =" http://www.never-online. Net "> <br/> <style> <br/> <! -- <Br/> body {<br/> font-size: 0.9em; <br/> font-family: verdana; <br/> background-color: appworkspace; <br/>}< br/>. myDiv {<br/> border: 4px solid #006699; <br/> height: 200px; <br/> width: 400px; <br/> color: #003399; <br/> padding: 20px; <br/> font-weight: bolder; <br/> text-align: center; <br/> background-color: # eeeeee; <br/>}< br/>. copyright <br/>{< br/> text-align: center; <br/> font-size: 1em; <br/>}< br/> --> <br /> </Style> <br/> <script language = "JavaScript"> <br/> <! -- </P> <p> function neverDragDivision (fObj) {with (this) <br/> {<br/> if (! FObj) return; <br/> this. bDraged = false; <br/> this. oDragOrig = fObj; <br/> oDragOrig. style. cursor = "move"; <br/> oDragOrig. onmousedown = function () <br/>{< br/> var ofs = Offset (oDragOrig); <br/> oDragOrig. style. position = "absolute"; <br/> oDragOrig. style. left = ofs. l; <br/> oDragOrig. style. top = ofs. t; <br/> oDragOrig. X = event. clientX-ofs. l; <br/> oDragOrig. Y = event. clientY-ofs. t; <br/> bDraged = True; <br/>}; <br/> oDragOrig. onmousemove = function () <br/>{< br/> if (! BDraged) return; <br/> oDragOrig. setCapture (); <br/> oDragOrig. style. left = event. clientX-oDragOrig. x; <br/> oDragOrig. style. top = event. clientY-oDragOrig. y; </p> <p >}; <br/> oDragOrig. onmouseup = function () <br/>{< br/> bDraged = false; <br/> oDragOrig. releaseCapture (); <br/>}; <br/> function Offset (e) {<br/> var t = e. offsetTop; <br/> var l = e. offsetLeft; <br/> var w = e. offsetWidth; <br/> var h = e. of FsetHeight; <br/> while (e = e. offsetParent) {<br/> t + = e. offsetTop; <br/> l + = e. offsetLeft; <br/>}< br/> return {t: t, l: l, w: w, h: h} <br/> }; <br/> }}; </p> <p> // --> <br/> </SCRIPT> <br/> </HEAD> <br/> <BODY> <br/> <table> <br/> <tr> <br/> <td> <br/> <div class = "myDiv"> </p> <p> http://www.never-online.net </p> <p> <p> power by blueDestiny, never-online </p> <br/> </div> <br/> </td> <br/> <div class = "myDiv "style = "Width: pixel PX"> <br/> <p> never-online, Everlasting love for angela. </p> <br/> </div> <br/> </td> <br/> </tr> <br/> </table> <br/> <p class = "copyright"> Power By blueDestiny, never-online, <a href = "http://www.never-online.net" _ fcksavedurl = "http://www.never-online.net"> http://www.never-online.net </a> </p> <br/> <script language = "JavaScript"> <br/> <! -- <Br/> var aDivs = document. getElementsByTagName ("DIV"); <br/> for (var I = 0; I <aDivs. length; I ++) {<br/> new neverDragDivision (aDivs [I]); <br/>}< br/> // --> <br/> </SCRIPT> <br/> </BODY> <br/> </HTML> <br/>View highlighted Code <! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<HTML>
<HEAD>
<TITLE> how to make a drag division-http://www.never-online.net </TITLE>
<Meta name = "Generator" CONTENT = "EditPlus">
<Meta name = "Author" CONTENT = "never-online, blueDestiny">
<Meta name = "Keywords" CONTENT = "never-online, blueDestiny">
<Meta name = "Description" CONTENT = "http://www.never-online.net">
<Style>
<! --
Body {
Font-size: 0.9em;
Font-family: verdana;
Background-color: appworkspace;
}
. MyDiv {
Border: 4px solid #006699;
Height: 200px;
Width: 400px;
Color: #003399;
Padding: 20px;
Font-weight: bolder;
Text-align: center;
Background-color: # eeeeee;
}
. Copyright
{
Text-align: center;
Font-size: 1em;
}
-->
</Style>
<Script language = "JavaScript">
<! --
Function neverDragDivision (fObj) {with (this)
{
If (! FObj) return;
This. bDraged = false;
This. oDragOrig = fObj;
ODragOrig. style. cursor = "move ";
ODragOrig. onmousedown = function ()
{
Var ofs = Offset (oDragOrig );
ODragOrig. style. position = "absolute ";
ODragOrig. style. left = ofs. l;
ODragOrig. style. top = ofs. t;
ODragOrig. X = event. clientX-ofs. l;
ODragOrig. Y = event. clientY-ofs. t;
BDraged = true;
};
ODragOrig. onmousemove = function ()
{
If (! BDraged) return;
ODragOrig. setCapture ();
ODragOrig. style. left = event. clientX-oDragOrig. X;
ODragOrig. style. top = event. clientY-oDragOrig. Y;
};
ODragOrig. onmouseup = function ()
{
BDraged = false;
ODragOrig. releaseCapture ();
};
Function Offset (e ){
Var t = e. offsetTop;
Var l = e. offsetLeft;
Var w = e. offsetWidth;
Var h = e. offsetHeight;
While (e = e. offsetParent ){
T + = e. offsetTop;
L + = e. offsetLeft;
}
Return {t: t, l: l, w: w, h: h}
};
}};
// -->
</SCRIPT>
</HEAD>
<BODY>
<Table>
<Tr>
<Td>
<Div class = "myDiv">
Http://www.never-online.net
<P> power by blueDestiny, never-online </p>
</Div>
</Td>
<Td>
<Div class = "myDiv" style = "width: 450px">
<P> never-online, Everlasting love for angela. </p>
</Div>
</Td>
</Tr>
</Table>
<H4 class = "copyright"> Power By blueDestiny, never-online, <a href = "http://www.never-online.net" _ fcksavedurl = "http://www.never-online.net"> http://www.never-online.net </a> <Script language = "JavaScript">
<! --
Var aDivs = document. getElementsByTagName ("DIV ");
For (var I = 0; I <aDivs. length; I ++ ){
New neverDragDivision (aDivs [I]);
}
// -->
</SCRIPT>
</BODY>
</HTML>
Section 3 describes how to improve the drag Layer Code step by step.
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
