Home > Developer > JavaScript
HTML code:
Copy codeThe Code is as follows:
<! Doctype html>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> </title>
<Link rel = "stylesheet" href = "style.css"/>
<Script type = "text/javascript" src = "drag. js"> </script>
<Script type = "text/javascript" src = "demo. js"> </script>
</Head>
<Body>
<Div id = "login">
<H2> website logon <Div class = "user">
Username: <input type = "text" name = "user" class = "txt"/>
</Div>
<Div class = "pass">
Password: <input type = "password" name = "pass" class = "txt"/>
</Div>
<Div class = "submit">
<Input type = "submit" value = "login" class = "button"/>
</Div>
</Div>
</Body>
</Html>
CSS code:
Copy codeThe Code is as follows:
Body, h2 {
Margin: 0;
Padding: 0;
}
# Login {
Width: 350px;
Height: 250px;
Border: 1px solid # ccc;
Position: absolute;
Left: 512px;
Top: 300px;
}
# Login h2 {
Font-size: 14px;
Text-align: center;
Height: 30px;
Line-height: 30px;
Background: # f60;
Color: white;
Cursor: move;
Margin-bottom: 30px;
Letter-spacing: 1px;
}
# Login. user, # login. pass {
Text-align: center;
Font-size: 12px;
Height: 60px;
Line-height: 40px;
}
# Login. txt {
Width: 200px;
Border: 1px solid # ccc;
Background: # fff;
Height: 30px;
Line-height: 30px;
}
# Login. submit {
Text-align: right;
}
# Login. button {
Width: 100px;
Height: 30px;
Background: # 06f;
Border: none;
Cursor: pointer;
Margin: 10px 30px;
Color: white;
Letter-spacing: 1px;
Font-weight: bold;
}
Drag the core code:
Copy codeThe Code is as follows:
Function drag (obj ){
If (typeof obj = 'string '){
Var obj = document. getElementById (obj );
} Else {
Var obj = obj;
}
Function fixEvent (event ){
Event.tar get = event. srcElement;
Event. preventDefault = fixEvent. preventDefault;
Return event;
}
FixEvent. preventDefault = function (){
This. returnValue = false;
};
Obj. onmousedown = mousedown;
Function mousedown (e ){
Var e = e | fixEvent (window. event );
Var disX = e. clientX-obj. offsetLeft;
Var disY = e. clientY-obj. offsetTop;
If (e.tar get. tagName = 'h2 '){
Document. onmousemove = move;
Document. onmouseup = up;
} Else {
Document. onmousemove = null;
Document. onmouseup = null;
}
Function move (e ){
Var e = e | fixEvent (window. event );
Var left = e. clientX-disX;
Var top = e. clientY-disY;
If (obj. setCapture ){
Obj. setCapture ();
}
If (left <0 ){
Left = 0;
} Else if (left> document.doc umentElement. clientWidth-obj. offsetWidth ){
Left = document.doc umentElement. clientWidth-obj. offsetWidth;
}
If (top <0 ){
Top = 0;
} Else if (top> document.doc umentElement. clientHeight-obj. offsetHeight ){
Top = document.doc umentElement. clientHeight-obj. offsetHeight;
}
Obj. style. left = left + 'px ';
Obj. style. top = top + 'px ';
Return false;
};
Function up (){
If (obj. releaseCapture ){
Obj. releaseCapture ();
}
Document. onmousemove = null;
Document. onmouseup = null;
}
};
}
Call code:
Copy codeThe Code is as follows:
Window. onload = function (){
Var login = document. getElementById ('login ');
Drag (login );
};
Thank you for your criticism !!!
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
