Jquery implements a drag window (source code) and jqueryigoogle like IGoogle
Google is the perfect way to use ajax special effects. google suggest, google map, and igoogle can be used to drag windows... today, we created 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
1 2 3 <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
4
5 <link rel = "stylesheet" type = "text/css" media = "screen" href = "css/my.css" mce_href = "css/my.css"/>
6 <mce: script type = "text/javascript" src = "js/jquery. min. js "mce_src =" js/jquery. min. js "> </mce: script>
7 <mce: script type = "text/javascript" src = "js/jquery-ui.min.js" mce_src = "js/jquery-ui.min.js"> </mce: script>
8 <mce: script type = "text/javascript" src = "js/jquery. easywidgets. js "mce_src =" js/jquery. easywidgets. js "> </mce: script>
9 <mce: script src = "js/example. js" mce_src = "js/example. js" type = "text/javascript"> </mce: script>
10 11
12 <body>
13 <! -- Left -->
14 <div id = "left" class = "widget-place column1">
15 <div id = "ldiv1" class = "widget movable">
16 <div id = "header" class = "widget-header"> <strong> drar me </strong> </div>
17 <div id = "content" class = "widget-content"> left ----- drag with the mouse </div>
18 </div>
19
20 <div id = "ldiv2" class = "widget movable">
21 <div id = "header" class = "widget-header"> <strong> drar me </strong> </div>
22 <div id = "content" class = "widget-content"> left ----- drag with the mouse </div>
23 </div>
24 <div id = "ldiv3" class = "widget movable">
25 <div id = "header" class = "widget-header"> <strong> drar me </strong> </div>
26 <div id = "content" class = "widget-content"> left ----- drag with the mouse </div>
27 </div>
28 </div>
29
30 <! -- Middle -->
31 <div id = "middle" class = "widget-place column2">
32 <div id = "mdiv1" class = "widget movable collapsable removable editable">
33 <div id = "header" class = "widget-header"> <strong> drar me </strong> </div>
34 <div class = "widget-editbox" style = "background: # CC6699" mce_style = "background: # CC6699"> here is the edited content, I added the background </div>
35 <div id = "content" class = "widget-content"> center ------ drag with the mouse </div>
36 </div>
37 <div id = "mdiv2" class = "widget movable removable editable">
38 <div id = "header" class = "widget-header"> <strong> drar me </strong> </div>
39 <div id = "content" class = "widget-content"> center ------ drag with the mouse </div>
40 </div>
41 <div id = "mdiv3" class = "widget movable removable editable">
42 <div id = "header" class = "widget-header"> <strong> drar me </strong> </div>
43 <div id = "content" class = "widget-content"> center ------ drag with the mouse </div>
44 </div>
45 </div>
46
47 <! -- Right -->
48 <div id = "right" class = "widget-place column3">
49 <div id = "rdiv1" class = "widget movable">
50 <div id = "header" class = "widget-header"> <strong> drar me </strong> </div>
51 <div id = "content" class = "widget-content"> right ------ drag with the mouse </div>
52 </div>
53 <div id = "rdiv2" class = "widget movable">
54 <div id = "header" class = "widget-header"> <strong> drar me </strong> </div>
55 <div id = "content" class = "widget-content"> right ------ drag with the mouse </div>
56 </div>
57 <div id = "rdiv3" class = "widget movable">
58 <div id = "header" class = "widget-header"> <strong> drar me </strong> </div>
59 <div id = "content" class = "widget-content"> right ------ drag with the mouse </div>
60 </div>
61 </div>
62 </body>
63
Css
1 body {
2 margin: 0;
3 padding: 0;
4
5 font-family: 'lucida grande', 'lucida Sans Unicode ', '', ' ', arial, verdana, sans-serif;
6 colors: #666;
7 font-size: 20px;
8 line-height: 150%;
9}
10 # left {
11 width: pixel PX;
12 height: 100%;
13 padding: 10px;
14 position: absolute;
15 top: 10px;
16 left: 10px;
17 border: solid red 2px;
18}
19 # left. widget {
20 width: 340px;
21 height: 150px;
22 padding; 10px;
23 margin: 20px;
24 border: solid red 2px;
25
26}
27 # left. widget. widget-header {
28 width: 340px;
29 height: 30px;
30 padding: 0;
31 margin: 0;
32 color: red;
33 position: static;
34
35}
36 # middle {
37 width: 400px;
38 height: 100%;
39 position: absolute;
40 top: 10px;
41 left: 435px;
42 padding: 10px;
43 margin: 0 30px 0;
44
45 border: solid red 2px;
46}
47 # middle. widget {
48 width: 360px;
49 height: 150px;
50 padding; 10px;
51 margin: 20px;
52 border: solid red 2px;
53
54}
55 # middle. widget. widget-header {
56 width: 360px;
57 height: 30px;
58 padding: 0;
59 margin: 0;
60 color: red;
61 position: static;
62
63}
64 # right {
65 width: pixel PX;
66 height: 100%;
67 padding: 10px;
68 position: absolute;
69 top: 10px;
70 right: 10px;
71 border: solid red 2px;
72}
73 # right. widget {
74 width: 340px;
75 height: 150px;
76 padding; 10px;
77 margin: 20px;
78 border: solid red 2px;
79
80}
81 # right. widget. widget-header {
82 width: 340px;
83 height: 30px;
84 padding: 0;
85 margin: 0;
86 color: red;
87 position: static;
88
89}
Js
$ (Document). ready (function (){
$. Fn. EasyWidgets ({
I18n :{
EditText: 'edit ',
CloseText: 'close ',
ExtendText: 'expand ',
CollapseText: 'fold ',
CancelEditText: 'cancel'
}
});
});
After all, it is a test example. My goal is to use it, because my css is not very good, so the effect is quite disgusting! However, the function is implemented, but when you drag it again, the div will shake and I don't know how to solve it !! Last pasted: before dragging:
After dragging:
Jquery drag window
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 Implement iGoogle personalized homepage? Js framework-PHP advanced Discussion
Javascript basics. You don't even know the basics. You still need to talk about how to use other people's frameworks? View Original post>
Remember to adopt it.
