Jquery implements a drag window (source code) and jqueryigoogle like IGoogle

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.