1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>博客推拽布局示例</title>
6<link href="main2.css" rel="stylesheet" type="text/css" />
7<script src="jquery.js" language="javascript"></script>
8<script src="dimensions.js" language="javascript"></script>
9<script src="drag2.js" language="javascript"></script>
10<script>
11 $(document).ready(
12 function () {
13 //初始化推拽布局
14 $("#main").DragLayout({
15 onEnd: function(modules) {
16 var order = "";
17 modules.each(function(){
18 order += $(this).attr("mid") + " ";
19 });
20
21 $("#order").text(order);
22 //或者进行ajax提交
23 }
24 });
25 //展开收缩效果
26 $(".control .control1").click(function(){
27 var control = $(this);
28 control.parent().next().slideToggle("slow", function(){
29 control.text()=="+expend"?control.text("-expend"):control.text("+expend");
30 });
31 });
32 //删除模块
33 $(".control .control2").click(function(){
34 var control = $(this).parent().parent();
35 control.fadeTo(300, 0.5);
36 setTimeout( function() {control.remove()}, 400);
37 });
38 //添加模块
39 $("#add").click(function(){
40 var modules = $("#main .module")
41 var lastModule = $(modules[modules.length-1]);
42 var newModule = lastModule.clone();
43 newModule.children(".title").text("new module");
44 newModule.children(".content").text("new content");
45 newModule.attr("mid", "newid");
46 newModule.insertAfter(lastModule);
47 newModule.fadeIn(300, 0.5);
48
49 });
50 }
51 );
52
53
54</script>
55</head>
56
57<body>
58<div id="modules">
59 <table id="main" cellspacing="10" border="0" width="98%" align="center">
60 <tr>
61 <td id="c1">
62 <div class="module" mid="1">
63 <div class="title">title1</div>
64 <div class="control"><span class="control1">+expend</span> <span class="control2">×delete</span></div>
65 <div class="content">content1</div>
66 </div>
67 <div class="module" mid="4">
68 <div class="title">title4</div>
69 <div class="control"><span class="control1">+expend</span> <span class="control2">×delete</span></div>
70 <div class="content">content4</div>
71 </div>
72 <div style="display:inline" mid="|"><div></div></div>
73 </td>
74 <td id="c2" >
75 <div class="module" mid="2">
76 <div class="title">title2</div>
77 <div class="control"><span class="control1">+expend</span> <span class="control2">×delete</span></div>
78 <div class="content">content2</div>
79 </div>
80 <div style="display:inline" mid="|"><div></div></div>
81 </td>
82 <td id="c3" >
83 <div class="module" mid="3">
84 <div class="title">title3</div>
85 <div class="control"><span class="control1">+expend</span> <span class="control2">×delete</span></div>
86 <div class="content">content3</div>
87 </div>
88 <div style="display:inline" mid="|"><div></div></div>
89 </td>
90 </tr>
91 </table>
92 <div id="ghost"></div>
93
94</div>
95<div id="other">
96<input type="button" id="add" value="+ add a module" /><br/>
97new order is：<div id="order" />
98</div>
99
100
101</body>
102</html>
