Home > Developer > JavaScript
Jquery implements the example code of the drag window, which is similar to IGoogle.
Google is the most powerful ajax effect. google suggest, google map, and igoogle can be used to drag windows... today, I want to make a website with similar effects. I made a simple demo similar to iGoogle.
This demo is based on a Jquery framework: easywidgets. This framework can be downloaded for free at http://plugins.jquery.com/project/easywidgets.
I will not talk much about it. I will directly paste the source code for everyone to learn!
Html
<Html> <Script type = "text/javascript" src = "js/jquery-ui.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery. easywidgets. js"> </script>
<Script src = "js/example. js" type = "text/javascript"> </script>
</Head> <body> <! -- Left --> <div id = "left" class = "widget-place column1"> <div id = "ldiv1" class = "widget movable"> <div id = "header "class =" widget-header "> <strong> drar me </strong> </div> <div id =" content "class =" widget-content "> left ----- use drag the mouse </div> <div id = "ldiv2" class = "widget movable"> <div id = "header" class = "widget-header"> <strong> drar me </strong> </div> <div id = "content" class = "widget-content"> left ----- drag with the mouse </div> </div> <Div id = "ldiv3" class = "widget movable"> <div id = "header" class = "widget-header"> <strong> drar me </strong> </div> <div id = "content" class = "widget-content"> left ----- drag with the mouse </div> <! -- Middle --> <div id = "middle" class = "widget-place column2"> <div id = "mdiv1" class = "widget movable collapsable removable editable"> <div id = "header" class = "widget-header"> <strong> drar me </strong> </div> <div class = "widget-editbox" style = "background: # CC6699 "mce_style =" background: # CC6699 "> here is the edited content, I added the background </div> <div id = "content" class = "widget-content"> center ------ drag with the mouse </div> <div id = "mdiv2" class = "w Idget movable removable editable "> <div id =" header "class =" widget-header "> <strong> drar me </strong> </div> <div id =" content "class =" widget-content "> center ------ drag with the mouse </div> <div id =" mdiv3 "class =" widget movable removable editable "> <div id = "header" class = "widget-header"> <strong> drar me </strong> </div> <div id = "content" class = "widget-content"> center ------ drag with the mouse </div> <! -- Right --> <div id = "right" class = "widget-place column3"> <div id = "rdiv1" class = "widget movable"> <div id = "header "class =" widget-header "> <strong> drar me </strong> </div> <div id =" content "class =" widget-content "> right ------ use drag the mouse </div> <div id = "rdiv2" class = "widget movable"> <div id = "header" class = "widget-header"> <strong> drar me </strong> </div> <div id = "content" class = "widget-content"> right ------ drag with the mouse </div> <div id = "rdiv3" class = "widget movable"> <div id = "header" class = "widget-header"> <strong> drar me </strong> </ div> <div id = "content" class = "widget-content"> right ------ drag with the mouse </div> </body> </ html>
CSS
Body {margin: 0; padding: 0; background-color: silver; font-family: 'lucida Grande ', 'lucida Sans Unicode', '',' ', arial, verdana, sans-serif; color: #666; font-size: 20px; line-height: 150% ;}# left {width: pixel PX; height: 100%; padding: 10px; position: absolute; top: 10px; left: 10px; border: solid red 2px;} # left. widget {width: 340px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white;} # left. widget. widget-header {width: 340px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray;} # middle {width: 400px; height: 100%; position: absolute; top: 10px; left: 435px; padding: 10px; margin: 0 30px 0; border: solid red 2px;} # middle. widget {width: 360px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white;} # middle. widget. widget-header {width: 360px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray;} # right {width: required PX; height: 100%; padding: 10px; position: absolute; top: 10px; right: 10px; border: solid red 2px;} # right. widget {width: 340px; height: 150px; padding; 10px; margin: 20px; border: solid red 2px; background-color: white;} # right. widget. widget-header {width: 340px; height: 30px; padding: 0; margin: 0; color: red; position: static; background-color: gray ;}
Javascript code
$ (Document ). ready (function () {$. fn. easyWidgets ({i18n: {editText: 'edit', closeText: 'offset', extendText: 'unzip', collapseText: 'fold', cancelEditText: 'cancel '}});});
This is jqDnR.
(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 )});
}
Return false;
}, Stop: function (){
E.css ("opacity", M. o );
$ (Document). 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;
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 "){
P = E. position ();
If (! ($. Browser. msie & ($. browser. version = "6.0") & (E.css ("position") = "fixed ")){
P. top-= $ (window). scrollTop ();
P. left-= $ (window). scrollLeft ();
}
}
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 });
$ (Document). mousemove ($. jqDnR. drag). mouse ...... the remaining full text>
How to solve js problems? Come and help me.
Set style. display of the corresponding div to "none"
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
