Here, I would like to thank the jquery developers for their great achievements .. He made JS writing so simple that it is not nonsense. Write code.
Remember to reference jquery ....
The following is the core code for implementing drag. You can understand it if you want to copy it to you.
(Function ($ ){
$. FN. jqdrag = function (h) {return I (this, H, 'D ');};
$. FN. jqresize = function (h) {return I (this, H, 'R ');};
$. Jqdnr = {DNR :{}, E: 0,
Drag: function (v ){
If (M. K = 'D '){
E.css ({left: M. X + v. pageX-M.pX, top: M. Y + v. pageY-M.pY });
}
Else {
E.css ({width: Math. Max (V. pageX-M.pX + m.w, 0), height: Math. Max (V. pageY-M.pY + M. H, 0 )});
E. Find ("IMG"). Each (function (){
Optional (this).css ("width", E. Width ()-1); // you can specify the actual display width.
((This).css ("height", E. Height ()-1); // you can specify the actual display width.
});
}
Return false;
},
Stop: function (){
E.css ('opacity ', M. O); $ (). Unbind ('mousemove', J. Drag). Unbind ('mouseup', J. Stop );
}
};
VaR J = $. jqdnr, M = J. DNR, E = J. E,
I = function (E, H, k ){
Return e. Each (function (){
H = (h )? $ (H, E): E;
// Alert(h.css ("width "));
H. BIND ('mousedown', {e: E, K: k}, function (v) {var d = v. data, P = {}; E = D. e;
// Attempt utilization of dimensions plugin to fix ie issues
If(e.css ('position ')! = 'Relative '){
Try {e. Position (p);} catch (e ){}
}
M = {
X: P. Left | f ('left') | 0,
Y: P. Top | f ('top') | 0,
W: F ('width') | E [0]. scrollwidth | 0,
H: F ('height') | E [0]. scrollheight | 0,
Px: V. pagex,
PY: V. Pagey,
K: D. K,
O: e.css ('opacity ')
};
E.css ({opacity: 0.8}); $ (). mousemove ($. jqdnr. Drag). mouseup ($. jqdnr. Stop );
Return false;
});
});
},
F = function (k) {return parseint(e.css (k) | false ;};
}) (Jquery );
I went to the ground. I didn't write a few blogs and I don't know how to insert code. It crashed ......
HTML code
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK"/>
<SCRIPT type = "text/JavaScript" src = "jquery-1.3.2.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "jqs. js"> </SCRIPT>
<Style>
. Drag {position: absolute; Border: 1px solid # DDD; text-align: center; padding: 5px; top: 100px; left: 20px; cursor: move ;}
. Jqhandle {
Background-color: # FFF;
Height: 15px;
Z-index: 100;
}
. Jqdrag {
Width: 100%;
Cursor: move;
}
. Jqresize {
Width: 15px;
Position: absolute;
Bottom: 0;
Right: 0;
Cursor: Se-resize;
}
. Jqdnr {
Z-index: 3;
Position: relative;
Width: 150px;
Height: 150px;
Font-size: 0.77em;
Color: # 618d5e;
Margin: 5px 10px 10px 10px;
Padding: 1px;
Background-color: # Eee;
Border: 1px solid # CCC;
}
</Style>
<Title> insert title here </title>
<SCRIPT>
$ (Function (){
$ ('# Ex1'). jqdrag ();
});
</SCRIPT>
</Head>
<Body>
<Div id = "ex1" class = "jqdnr">
Sdfdsf
</Div>
</Body>
</Html>
Thank you for taking a picture of me .....