最近需要实现一个仿google的个性化定制；既对窗口的模块可以拖放，创建新的窗口模块。。。
网上实现窗口拖放效果的例子也有不少。
本人找个了个baseball的例子，利用它的拖放框架增加了创建新窗口的动态模块，拖放后的窗口位置的保存功能……
即读取到显示的box模块的id、位置、resultId（前台页面异步显示时返回结果的div的id）；对新建的box则需要读取box的id、标题、位置、resultId、定制的模块（下拉菜单选中的值）。。
只需把这两个返回的字符串提交给后台处理，保存的数据库即可。。。前台显示数据时直接读取数据库中的信息、利用ajax异步载入到页面即可。
记录一下以备后用。
这是html中所引用的js文件
1 <html>
2 <head>
3 <title></title>
4 <style>
5 body{ padding:0; margin:0;}
6 .box{border:1px dashed #ccc; margin-bottom:8px; overflow:hidden; height:100%; clear:both;font-size:12px; }
7 .box p{ padding:5px; margin:0;}
8 .box .basebat{ margin:0; padding:5px; background:#e1e1e1;font-size:12px; color:#333333; background:#f1f1f1; border-bottom:1px dashed #ccc;cursor:move; }
9 .box .basebat .f_r{ float:right; cursor:pointer; font-weight:normal;}
10 .warp{ width:820px; margin:0 auto;font-size:12px;}
11 #left{ width:200px; float:left;}
12 #center{ width:400px;margin-left:10px;float:left;}
13 #right{ width:200px; float:right;}
14 </style>
15 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
16 <script type="text/javascript" src="popbaseball.min.js"></script>
17 <script type="text/javascript" src="prototype.js"></script>
18
19 <script type="text/javascript">
20 function dragDiv()
21 {
22 jQuery(document).ready(function(){
23 jQuery.baseball({
24 accepter:"#left,#center,#right",
25 target:".box",
26 handle:".basebat"
27 })
28 })
29 }
30
31 //保存box的布局
32 function saveDivs(){
33 var objdoc = document.getElementsByTagName("h1");
34 var divsNames = '';
35 for(i=0;i<objdoc.length;i++)
36 {
37 if(objdoc[i].className == "basebat"&&objdoc[i].parentNode.style.display=="")
38 {
39 divsNames += objdoc[i].parentNode.id + '-';
40 divsNames += objdoc[i].parentNode.parentNode.id+ '-';
41 divsNames += objdoc[i].nextSibling.id+'|';
42 }
43 }
44 alert(divsNames);
45 }
46
47 //保存新增的box
48 function saveNewBoxs(){
49 var objdoc = document.getElementsByTagName("h1");
50 var divsNames = '';
51
52 for(i=0;i<objdoc.length;i++)
53 {
54 if( objdoc[i].className == "basebat"
55 &&objdoc[i].parentNode.style.display==""
56 &&objdoc[i].childNodes.length == 2 //新增box里标题栏里有两个节点
57 &&objdoc[i].nextSibling.childNodes.length >3 //新增box的内容里有4个节点；大于3可以甄选出新增的box
58 )
59 {
60 divsNames += objdoc[i].parentNode.id + '-'; //新增box的id
61 divsNames += objdoc[i].nextSibling.id+'-'; //新增box的用于ajax返回result的id
62
63 var subNodes = objdoc[i].nextSibling.childNodes;
64 //获取box的标题
65 for(var j=0;j< subNodes.length;j++)
66 {
67 var field = subNodes;
68 var fieldType = field[j].nodeName.toLowerCase();
69 if(fieldType=="input")
70 {
71 divsNames += field[j].value +'-';
72 }
73 }
74 //获取box下拉菜单的选中项
75 for(var j=0;j< subNodes.length;j++)
76 {
77 var field = subNodes;
78 var fieldType = field[j].nodeName.toLowerCase();
79 if(fieldType=="select")
80 {
81 divsNames += field[j].value +'|';
82 }
83 }
84 }
85 }
86 alert(divsNames);
87 }
88
89 //隐藏或显示box
90 function switchDivState(d){
91 var Objdoc_ = $(d+'_');
92 if(Objdoc_.checked){
93 var Objdoc = $(d);
94 Objdoc.style.display="";
95 }else{
96 var Objdoc = $(d);
97 Objdoc.style.display="none";
98 }
99 }
100 //隐藏box
101 function closeDiv(d){
102 var Objdoc_ = $(d+'_');
103 Objdoc_.checked="";
104 var Objdoc = $(d);
105 Objdoc.style.display="none";
106 }
107 //关闭box——关了之后无法再重新显示
108 function justCloseDiv(d){
109 var Objdoc =$(d);
110 Objdoc.style.display="none";
111 }
112
113 //编辑box的标题
114 function editDivTitle(titleId,obj)
115 {
116 $(titleId).innerHTML=obj.value;
117 }
118
119 //box的编辑栏
120 function editDiv(divId,resultId)
121 {
122 var divTitle = 'title' + Math.random();
123 var defaultTitleName = "new title";
124 var defText1 = "编辑标题：";
125
126 $(divId).innerHTML = "<h1 class=\"basebat\"><span class=\"f_r\" onclick=\"JavaScript:justCloseDiv(\'"+divId+"\')\">关闭</span><div id=\""+divTitle+"\">"+defaultTitleName+"</div></h1><div id=\""+resultId+"\">"
127 +defText1+"<input class=\"text\" type=\"text\" onkeyup=\"editDivTitle(\'"+divTitle+"\',this)\" value=\""+defaultTitleName+"\"/>"
128 +"内容：<select ><option value=\"\" selected></option><option value=\"0\">使用中</option><option value=\"1\">废弃</option></select>"
129 +"</div>";
130
131 dragDiv();
132 }
133
134 //增加一个box
135 function addNewDiv()
136 {
137 var thisDiv = $("center");
138
139 var newDivIdName = 'div'+Math.random();
140 var resultDivIdName = 'result'+Math.random();
141 var newDiv = document.createElement("div");
142 newDiv.setAttribute("id",newDivIdName);
143 newDiv.setAttribute("class","box");
144
145 thisDiv.appendChild(newDiv);
146
147 $(newDivIdName).innerHTML= "<h1 class=\"basebat\">new title<span class=\"f_r\" onclick=\"JavaScript:justCloseDiv(\'"+newDivIdName+"\')\">关闭</span><span class=\"f_r\" onclick=\"JavaScript:editDiv(\'"+newDivIdName+"\',\'"+resultDivIdName+"\')\">编辑</span></h1><div id=\""+resultDivIdName+"\"></div>";
148
149 dragDiv();
150 }
151
152 /**
153 *ajax的异步载入
154 */
155 var loaded = '0';//载入结束标志
156 function getDivContent(myUrl,myParas,myResult)
157 {
158 var request_url= myUrl; // 请求url
159 var request_pars = myParas+'&fresh=Math.random()'; // 请求参数
160 var request_method = 'get'; // 请求方法
161 var myAjax = new Ajax.Updater(myResult, request_url,{
162 method : request_method,
163 parameters : request_pars,
164 onFailure : reportError,
165 onLoading : loading,
166 onComplete : done,
167 evalScripts: true //允许执行返回内容中的脚本代码
168
169 });
170 }
171
172 function loading()
173 {
174 $('loading').style.display = 'block';
175 if(loaded == '1')
176 $('loading').style.display = 'none';
177 }
178
179 function done()
180 {
181 $('loading').style.display = 'none';
182 loaded = '1';//载入结束
183 }
184
185
186 function reportError()
187 {
188 alert('Sorry. There was an error.');
189 }
190 </script>
191 </head>
192 <body onload="dragDiv()">
193 <div class="warp" style="border:1px solid #e1e1e1; width:818px; margin-top:8px;">
194 <div style=" padding:6px 10px;margin-bottom:8px; background:#f1f1f1; border-bottom:1px solid #e1e1e1;">首页模块管理</div>
195 <div style=" padding:10px;">
196 <input name="aa_" id="aa_" type="checkbox" value="TEST" checked="checked" onclick="JavaScript:switchDivState('aa')"/> 天气预报
197 <input name="bb_" id="bb_" type="checkbox" value="" checked="checked" onclick="JavaScript:switchDivState('bb')"/> 搜索
198 <input name="cc_" id="cc_" type="checkbox" value="" checked="checked" onclick="JavaScript:switchDivState('cc')"/> boxC
199 <input name="dd_" id="dd_" type="checkbox" value="" checked="checked" onclick="JavaScript:switchDivState('dd')" /> boxD
200 <input name="save" type="button" value="ajax"
201 onclick="getDivContent('myWeather.jsp','','resultWeather');getDivContent('dmyGoogle.jsp','','resultGoogle')"/>
202 <input name="save" type="button" value="保存布局" onclick="saveDivs();saveNewBoxs()"/>
203 <input name="newDiv" type="button" onclick="addNewDiv();" value="NEW DIV"/>
204
205 </div>
206 <div style=" padding:10px;" id="loading" class="loading">载入中……</div>
207 </div>
208 <div style=" border-bottom:4px solid #e1e1e1; clear:both; height:14px; margin-bottom:14px; font-size:0;"></div>
209 <div class="warp">
210 <div id="left">
211 <div class="box" id="aa"><h1 class="basebat">天气预报<span class="f_r" onclick="JavaScript:closeDiv('aa')">关闭</span></h1><div id="resultWeather"></div></div>
212 <div class="box" id="bb"><h1 class="basebat">搜索<span class="f_r" onclick="JavaScript:closeDiv('bb')">关闭</span></h1><div id="resultGoogle"></div></div>
213 </div>
214
215 <div id="center">
216 <div class="box" id="cc"><h1 class="basebat"><span class="f_r" onclick="JavaScript:closeDiv('cc')">关闭</span>boxC</h1><div id="resultCc"></div></div>
217 </div>
218
219 <div id="right">
220 <div class="box" id="dd"><h1 class="basebat"><span class="f_r" onclick="JavaScript:closeDiv('dd')">关闭</span>boxD</h1><div id="resultCc"></div></div>
221 </div>
222 </body>
223
224 </html>
225