隨筆-153 
評論-235 
文章-19 
trackbacks-0

          
	

          

          
	
					


          
	
	
          幾種不同的javascript移動層
          http://ifairy.cn/blog/article.asp?id=256

          

          樣式1
          

            
    
          1. <html>
    
          2. <head>
    
          3. <title>_xWin</title>
    
          4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    
          5. <META NAME="Description" CONTENT="http://www.xuemu.net">
    
          6. <style type="text/css">
    
          7. <!--
    
          8. #main {
    
          9.  background-color: #CCCCCC;
    
          10.  height: 600px;
    
          11.  width: 520px;
    
          12. }
    
          13. -->
    
          14. </style>
    
          15. <script language=JScript>
    
          16. <!--
    
          17. //可以打包為js文件;
    
          18. var x0=0,y0=0,x1=0,y1=0;
    
          19. var offx=6,offy=6;
    
          20. var moveable=false;
    
          21. var hover='orange',normal='#336699';//color;
    
          22. var index=10000;//z-index;
    
          23. //開始拖動;
    
          24. function startDrag(obj)
    
          25. {
    
          26. if(event.button==1)
    
          27. {
    
          28. //鎖定標題欄;
    
          29. obj.setCapture();
    
          30. //定義對象;
    
          31. var win = obj.parentNode;
    
          32. var sha = win.nextSibling;
    
          33. //記錄鼠標和層位置;
    
          34. x0 = event.clientX;
    
          35. y0 = event.clientY;
    
          36. x1 = parseInt(win.style.left);
    
          37. y1 = parseInt(win.style.top);
    
          38. //記錄顏色;
    
          39. normal = obj.style.backgroundColor;
    
          40. //改變風格;
    
          41. obj.style.backgroundColor = hover;
    
          42. win.style.borderColor = hover;
    
          43. obj.nextSibling.style.color = hover;
    
          44. sha.style.left = x1 + offx;
    
          45. sha.style.top = y1 + offy;
    
          46. moveable = true;
    
          47. }
    
          48. }
    
          49. //拖動;
    
          50. function drag(obj)
    
          51. {
    
          52. if(moveable)
    
          53. {
    
          54. var win = obj.parentNode;
    
          55. var sha = win.nextSibling;
    
          56. win.style.left = x1 + event.clientX - x0;
    
          57. win.style.top = y1 + event.clientY - y0;
    
          58. sha.style.left = parseInt(win.style.left) + offx;
    
          59. sha.style.top = parseInt(win.style.top) + offy;
    
          60. }
    
          61. }
    
          62. //停止拖動;
    
          63. function stopDrag(obj)
    
          64. {
    
          65. if(moveable)
    
          66. {
    
          67. var win = obj.parentNode;
    
          68. var sha = win.nextSibling;
    
          69. var msg = obj.nextSibling;
    
          70. win.style.borderColor = normal;
    
          71. obj.style.backgroundColor = normal;
    
          72. msg.style.color = normal;
    
          73. sha.style.left = obj.parentNode.style.left;
    
          74. sha.style.top = obj.parentNode.style.top;
    
          75. obj.releaseCapture();
    
          76. moveable = false;
    
          77. }
    
          78. }
    
          79. //獲得焦點;
    
          80. function getFocus(obj)
    
          81. {
    
          82. if(obj.style.zIndex!=index)
    
          83. {
    
          84. index = index+2;
    
          85. var idx = index;
    
          86. obj.style.zIndex=idx;
    
          87. obj.nextSibling.style.zIndex=idx-1;
    
          88. }
    
          89. }
    
          90. //最小化;
    
          91. function min(obj)
    
          92. {
    
          93. var win = obj.parentNode.parentNode;
    
          94. var sha = win.nextSibling;
    
          95. var tit = obj.parentNode;
    
          96. var msg = tit.nextSibling;
    
          97. var flg = msg.style.display=="none";
    
          98. if(flg)
    
          99. {
    
          100. win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;
    
          101. sha.style.height = win.style.height;
    
          102. msg.style.display = "block";
    
          103. obj.innerHTML = "0";
    
          104. }
    
          105. else
    
          106. {
    
          107. win.style.height = parseInt(tit.style.height) + 2*2;
    
          108. sha.style.height = win.style.height;
    
          109. obj.innerHTML = "2";
    
          110. msg.style.display = "none";
    
          111. }
    
          112. }
    
          113. //創建一個對象;
    
          114. function xWin(id,w,h,l,t,tit,msg)
    
          115. {
    
          116. index = index+2;
    
          117. this.id = id;
    
          118. this.width = w;
    
          119. this.height = h;
    
          120. this.left = l;
    
          121. this.top = t;
    
          122. this.zIndex = index;
    
          123. this.title = tit;
    
          124. this.message = msg;
    
          125. this.obj = null;
    
          126. this.bulid = bulid;
    
          127. this.bulid();
    
          128. }
    
          129. //初始化;
    
          130. function bulid()
    
          131. {
    
          132. var str = ""
    
          133. + "<div id=xMsg" + this.id + " "
    
          134. + "style='"
    
          135. + "z-index:" + this.zIndex + ";"
    
          136. + "width:" + this.width + ";"
    
          137. + "height:" + this.height + ";"
    
          138. + "left:" + this.left + ";"
    
          139. + "top:" + this.top + ";"
    
          140. + "background-color:" + normal + ";"
    
          141. + "color:" + normal + ";"
    
          142. + "font-size:8pt;"
    
          143. + "font-family:Tahoma;"
    
          144. + "position:absolute;"
    
          145. + "cursor:default;"
    
          146. + "border:2px solid " + normal + ";"
    
          147. + "' "
    
          148. + "onmousedown='getFocus(this)'>"
    
          149. + "<div id=Nav_"+(this.id)
    
          150. + " style='"
    
          151. + "background-color:" + normal + ";"
    
          152. + "width:" + (this.width-2*2) + ";"
    
          153. + "height:20;"
    
          154. + "color:white;"
    
          155. + "' "
    
          156. + "onmousedown='startDrag(this)' "
    
          157. + "onmouseup='stopDrag(this)' "
    
          158. + "onmousemove='drag(this)' "
    
          159. + "ondblclick='min(this.childNodes[1])'"
    
          160. + ">"
    
          161. + "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"
    
          162. + "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(Nav_"+(this.id)+".childNodes[1])'>0</span>"
    
          163. + "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='ShowHide(\""+this.id+"\",null)'>r</span>"
    
          164. + "</div>"
    
          165. + "<div id=C_"+(this.id)+" style='"
    
          166. + "width:100%;"
    
          167. + "height:" + (this.height-20-4) + ";"
    
          168. + "background-color:white;"
    
          169. + "line-height:14px;"
    
          170. + "word-break:break-all;"
    
          171. + "padding:3px;"
    
          172. + "'>" + this.message + "</div>"
    
          173. + "</div>"
    
          174. + "<div id=xMsg" + this.id + "bg style='"
    
          175. + "width:" + this.width + ";"
    
          176. + "height:" + this.height + ";"
    
          177. + "top:" + this.top + ";"
    
          178. + "left:" + this.left + ";"
    
          179. + "z-index:" + (this.zIndex-1) + ";"
    
          180. + "position:absolute;"
    
          181. + "background-color:black;"
    
          182. + "filter:alpha(opacity=40);"
    
          183. + "'></div>";
    
          184. document.body.insertAdjacentHTML("beforeEnd",str);
    
          185. 
    
          186. }
    
          187. //顯示隱藏窗口
    
          188. function ShowHide(id,dis){
    
          189. var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
    
          190. document.getElementById("xMsg"+id).style.display = bdisplay;
    
          191. document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
    
          192. alert (bdisplay);
    
          193. 
    
          194. }
    
          195. //-->
    
          196. </script>
    
          197. 
    
          198. <script language='JScript'>
    
          199. <!--
    
          200. function initialize()
    
          201. {
    
          202. var a = new xWin("1",250,180,10,100,"窗口1","");
    
          203. var b = new xWin("2",250,180,10,140,"窗口2","Welcome to visited my personal website:感謝您的關注！");
    
          204. var c = new xWin("3",250,180,270,100,"窗口3","Copyright by <a href='#'>Wildwind</a>!");
    
          205. var d = new xWin("4",250,180,270,140,"窗口4","Copyright by <a href='#'>Wildwind</a>!");
    
          206. //ShowHide("1","none");//隱藏窗口1
    
          207. //ShowHide("2","none");//隱藏窗口2
    
          208. //ShowHide("3","none");//隱藏窗口3
    
          209. min(Nav_1.childNodes[1]);//最小化窗口1
    
          210. min(Nav_2.childNodes[1]);//最小化窗口2
    
          211. min(Nav_3.childNodes[1]);//最小化窗口3
    
          212. min(Nav_4.childNodes[1]);//最小化窗口4
    
          213. }
    
          214. 
    
          215. window.onload = initialize;
    
          216. </script>
    
          217. </head>
    
          218. <base target="_blank">
    
          219. <body onselectstart='return false' oncontextmenu='return false' >
    
          220. <p><span onClick="min(Nav_1.childNodes[1]);">窗口1最小化</span>
    
          221. <a onClick="ShowHide('1',null);return false;" href="">窗口1</a>
    
          222. <a onClick="ShowHide('2',null);return false;" href="">窗口2</a>
    
          223. <a onClick="ShowHide('3',null);return false;" href="">窗口3</a></p>
    
          224. <div id="main">main</div>
    
          225. <p> </p>
    
          226. </body>
    
          227. </html>[ 
            228. 

          



          樣式2
          

            
    
          1. <html>
    
          2. <head>
    
          3. <style>
    
          4. *{font-size:12px}
    
          5. .dragTable{
    
          6.  font-size:12px;
    
          7.  border-top:1px solid #3366cc;
    
          8.  margin-bottom: 10px;
    
          9.  width:100%;
    
          10.  background-color:#FFFFFF;
    
          11. }
    
          12. td{vertical-align:top;}
    
          13. .dragTR{
    
          14.  cursor:move;
    
          15.  color:#7787cc;
    
          16.  background-color:#e5eef9;
    
          17.  height:20px;
    
          18.  padding-left:5px;
    
          19.  font-weight:bold;
    
          20. }
    
          21. #parentTable{
    
          22.  border-collapse:collapse;
    
          23.  letter-spacing:25px;
    
          24. }
    
          25. </style>
    
          26. <script defer>
    
          27. /****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/
    
          28.  var Drag={dragged:false,
    
          29.   ao:null,
    
          30.   tdiv:null,
    
          31. dragStart:function(){
    
          32.  Drag.ao=event.srcElement;
    
          33.  if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
    
          34.   Drag.ao=Drag.ao.offsetParent;
    
          35.   Drag.ao.style.zIndex=100;
    
          36.  }else
    
          37.   return;
    
          38.  Drag.dragged=true;
    
          39.  Drag.tdiv=document.createElement("div");
    
          40.  Drag.tdiv.innerHTML=Drag.ao.outerHTML;
    
          41.  Drag.ao.style.border="1px dashed red";
    
          42.  Drag.tdiv.style.display="block";
    
          43.  Drag.tdiv.style.position="absolute";
    
          44.  Drag.tdiv.style.filter="alpha(opacity=70)";
    
          45.  Drag.tdiv.style.cursor="move";
    
          46.  Drag.tdiv.style.border="1px solid #000000";
    
          47.  Drag.tdiv.style.width=Drag.ao.offsetWidth;
    
          48.  Drag.tdiv.style.height=Drag.ao.offsetHeight;
    
          49.  Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
    
          50.  Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
    
          51.  document.body.appendChild(Drag.tdiv);
    
          52.  Drag.lastX=event.clientX;
    
          53.  Drag.lastY=event.clientY;
    
          54.  Drag.lastLeft=Drag.tdiv.style.left;
    
          55.  Drag.lastTop=Drag.tdiv.style.top;
    
          56. },
    
          57. 
    
          58. draging:function(){//重要:判斷MOUSE的位置
    
          59.  if(!Drag.dragged||Drag.ao==null)return;
    
          60.  var tX=event.clientX;
    
          61.  var tY=event.clientY;
    
          62.  Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
    
          63.  Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
    
          64.  for(var i=0;i<parentTable.cells.length;i++){
    
          65.   var parentCell=Drag.getInfo(parentTable.cells[i]);
    
          66.   if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
    
          67.    var subTables=parentTable.cells[i].getElementsByTagName("table");
    
          68.    if(subTables.length==0){
    
          69.     if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
    
          70.      parentTable.cells[i].appendChild(Drag.ao);
    
          71.     }
    
          72.     break;
    
          73.    }
    
          74.    for(var j=0;j<subTables.length;j++){
    
          75.     var subTable=Drag.getInfo(subTables[j]);
    
          76.     if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
    
          77.      parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
    
          78.      break;
    
          79.     }else{
    
          80.      parentTable.cells[i].appendChild(Drag.ao);
    
          81.     } 
    
          82.    }
    
          83.   }
    
          84.  }
    
          85. }
    
          86. ,
    
          87. dragEnd:function(){
    
          88.  if(!Drag.dragged)return;
    
          89.  Drag.dragged=false;
    
          90.  Drag.mm=Drag.repos(150,15);
    
          91.  Drag.ao.style.borderWidth="0px";
    
          92.  Drag.ao.style.borderTop="1px solid #3366cc";
    
          93.  Drag.tdiv.style.borderWidth="0px";
    
          94.  Drag.ao.style.zIndex=1;
    
          95. },
    
          96. getInfo:function(o){//取得坐標
    
          97.  var to=new Object();
    
          98.  to.left=to.right=to.top=to.bottom=0;
    
          99.  var twidth=o.offsetWidth;
    
          100.  var theight=o.offsetHeight;
    
          101.  while(o!=document.body){
    
          102.   to.left+=o.offsetLeft;
    
          103.   to.top+=o.offsetTop;
    
          104.   o=o.offsetParent;
    
          105.  }
    
          106.   to.right=to.left+twidth;
    
          107.   to.bottom=to.top+theight;
    
          108.  return to;
    
          109. },
    
          110. repos:function(aa,ab){
    
          111.  var f=Drag.tdiv.filters.alpha.opacity;
    
          112.  var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
    
          113.  var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
    
          114.  var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
    
          115.  var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
    
          116.  var kf=f/ab;
    
          117.  return setInterval(function(){if(ab<1){
    
          118.        clearInterval(Drag.mm);
    
          119.        Drag.tdiv.removeNode(true);
    
          120.        Drag.ao=null;
    
          121.        return;
    
          122.       }
    
          123.      ab--;
    
          124.      tl-=kl;
    
          125.      tt-=kt;
    
          126.      f-=kf;
    
          127.      Drag.tdiv.style.left=parseInt(tl)+"px";
    
          128.      Drag.tdiv.style.top=parseInt(tt)+"px";
    
          129.      Drag.tdiv.filters.alpha.opacity=f;
    
          130.     }
    
          131. ,aa/ab)
    
          132. },
    
          133. inint:function(){//初始化
    
          134.  for(var i=0;i<parentTable.cells.length;i++){
    
          135.   var subTables=parentTable.cells[i].getElementsByTagName("table");
    
          136.   for(var j=0;j<subTables.length;j++){
    
          137.    if(subTables[j].className!="dragTable")break;
    
          138.    subTables[j].rows[0].className="dragTR";
    
          139.    subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
    
          140.   }
    
          141.  }
    
          142.  document.onmousemove=Drag.draging;
    
          143.  document.onmouseup=Drag.dragEnd;
    
          144. }
    
          145. //end of Object Drag
    
          146. }
    
          147. Drag.inint();
    
          148. 
    
          149. function _show(str){
    
          150.  var w=window.open('','');
    
          151.  var d=w.document;
    
          152.  d.open();
    
          153.  str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
    
          154.  str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
    
          155.  str=str.replace(/\r/g,"<br />\n");
    
          156.  d.write(str);
    
          157. }
    
          158. </script>
    
          159. </head>
    
          160. <body>
    
          161. <table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
    
          162. <tr >
    
          163.  <td width="25%" valgin="top">
    
          164.   <table border=0 class="dragTable" cellspacing="0">
    
          165.    <tr>
    
          166.     <td><b>GMAIL</b></td>
    
          167.    </tr>
    
          168.    <tr>
    
          169.     <td>暫時無法顯示GMAIL內容</td>
    
          170.    <tr>
    
          171.   </table><table border=0 class="dragTable" cellspacing="0">
    
          172.    <tr>
    
          173.     <td>新浪體育</td>
    
          174.    </tr>
    
          175.    <tr>
    
          176.     <td>解剖威隊獨門利器FW28 2萬轉引擎匹配超級變速器頒獎：辛吉斯欣喜能以冠軍起步<br/> 印度搭檔創下紀錄法新社前瞻冬奧短道速滑：中韓唱主角 美加施冷箭</td>
    
          177.    <tr>
    
          178.   </table>
    
          179.   <table border=0 class="dragTable" cellspacing="0">
    
          180.    <tr>
    
          181.     <td>焦點</td>
    
          182.    </tr>
    
          183.    <tr>
    
          184.     <td>京廣線中斷4小時20臨客返漢晚點 中國新聞網-湖北分社 - 所有 235 相關報道 »哈馬斯已有總理人選
    
          185. 解放日報報業集團 - 所有 489 相關報道 »陳水扁是兩岸關系麻煩制造者 武漢晨報 - 所有 179 相關報道 »</td>
    
          186.    <tr>
    
          187.   </table>
    
          188.  </td>
    
          189.  <td width="25%">
    
          190.   <table border=0 class="dragTable" cellspacing="0">
    
          191.    <tr>
    
          192.     <td>中關村在線</td>
    
          193.    </tr>
    
          194.    <tr>
    
          195.     <td>新年行情速遞 雙敏板卡低價推薦 終于等到了，映泰6600GT一降降一百 羅技G15游戲鍵盤熱力促銷，代購價僅529元 </td>
    
          196.    <tr>
    
          197.   </table></td>
    
          198.  <td width="25%">
    
          199.   <table border=0 class="dragTable" cellspacing="0">
    
          200.    <tr>
    
          201.     <td>網易商業</td>
    
          202.    </tr>
    
          203.    <tr>
    
          204.     <td>上海GDP增幅去年出現回落應對反傾銷 中國鞋企聯手對抗歐盟尹家緒操盤南方汽車 長安謀求曲線整體境外上市</td>
    
          205.    <tr>
    
          206.   </table>  <table border=0 class="dragTable" cellspacing="0">
    
          207.    <tr>
    
          208.     <td>黑可天下</td>
    
          209.    </tr>
    
          210.    <tr>
    
          211.     <td>上海GDP增幅去年出現回落應對反傾銷 中國鞋企聯手對抗歐盟尹家緒操盤南方汽車 長安謀求曲線整體境外上市</td>
    
          212.    <tr>
    
          213.   </table>
    
          214.  </td>
    
          215. </tr>
    
          216. </table>
    
          217. <input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
    
          218. </body>
    
          219. </html> 
            220. 

          



          樣式3
          

            
    
          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. <meta http-equiv="content-language" content="zh-cn" />
    
          6. <meta name="author" content="forfor" />
    
          7. <meta name="keywords" content="" />
    
          8. <title>Demo</title>
    
          9. <script type="text/javascript">
    
          10. <!--
    
          11. var IE=false,FF=false,W=window,D=document,H,B,GET="getElementsByTagName",GEI="getElementById",qq=0;
    
          12. 
    
          13. function fold(){
    
          14.  var e;
    
          15.  e=fixE(e);
    
          16.  if(e)element=fixElement(e);
    
          17.  element=element.parentNode.parentNode;
    
          18.  element.className=element.className.indexOf("hide")>0?"module":"module hide";
    
          19. }
    
          20. 
    
          21. var Drag={
    
          22.  draging : false,
    
          23.  x : 0,
    
          24.  y : 0,
    
          25.  element : null,
    
          26.  fDiv : null,
    
          27.  ghost : null,
    
          28.  addEvent : function(){var a=D[GET]("li");for(var i=a.length-1;i>-1;i--)if(a[i].className=="module")a[i].onmousedown=Drag.dragStart;},
    
          29.  ix:2,iy:7,
    
          30.  ox:6,oy:7,
    
          31.  fx:6,fy:6,
    
          32. 
    
          33.  dragStart : function (e){
    
          34.   if(Drag.draging)return;
    
          35.   var e;
    
          36.   e=fixE(e);
    
          37.   if(e)element=fixElement(e);
    
          38.   
    
          39.   /*********
    
          40.   var k,s="";
    
          41.   for(k in element)s+=k+" : "+element[k]+"<br/>";
    
          42.   D.getElementById("bbb").innerHTML=s;
    
          43.   **********/
    
          44.   D.getElementById("aaa").innerHTML=element.parentNode.offsetTop+ ","+element.parentNode.offsetHeight;
    
          45.   //測試
    
          46. 
    
          47.   if(element.className!="title")return;
    
          48.   element=element.parentNode;
    
          49.   Drag.element=element;
    
          50.   //以上獲得當前移動的模塊
    
          51. 
    
          52.   Drag.x=e.layerX?e.layerX+Drag.fx:(IE?e.x+Drag.ix:e.offsetX+Drag.ox);
    
          53.   Drag.y=e.layerY?e.layerY+Drag.fy:(IE?e.y+Drag.iy:e.offsetY+Drag.oy);
    
          54.   //鼠標相對于模塊的位置
    
          55. 
    
          56.   Drop.measure();
    
          57.   if(e.layerX){Drag.floatIt(e);Drag.drag(e);}//fix FF
    
          58.   B.style.cursor="move";
    
          59.   D.onmousemove=Drag.drag;
    
          60.   D.ondragstart=function(){window.event.returnValue = false;}
    
          61.   D.onselectstart=function(){window.event.returnValue = false;};
    
          62.   D.onselect=function(){return false};
    
          63.   D.onmouseup=element.onmouseup=Drag.dragEnd;
    
          64.   element.onmousedown=null;
    
          65.  },
    
          66.  drag : function (e){
    
          67.   var e;
    
          68.   e=fixE(e);
    
          69.   if(!Drag.fDiv)Drag.floatIt(e);//for IE & Opera
    
          70.   var x=e.clientX,y=e.clientY;
    
          71.   Drag.fDiv.style.top=y+H.scrollTop-Drag.y+"px";
    
          72.   Drag.fDiv.style.left=x+H.scrollLeft-Drag.x+"px";
    
          73.   Drop.drop(x,y);
    
          74.   //statu(e);
    
          75.  },
    
          76.  dragEnd : function (e){
    
          77.   B.style.cursor="";
    
          78.   D.ondragstart=D.onmousemove=D.onselectstart=D.onselect=D.onmouseup=null;
    
          79.   Drag.element.onmousedown=Drag.dragStart;
    
          80.   if(!Drag.draging)return;
    
          81.   Drag.ghost.parentNode.insertBefore(Drag.element,Drag.ghost);
    
          82.   Drag.ghost.parentNode.removeChild(Drag.ghost);
    
          83.   B.removeChild(Drag.fDiv);
    
          84.   Drag.fDiv=null;
    
          85.   Drag.draging=false;
    
          86.   Drop.init(D[GEI]("container"));
    
          87.  },
    
          88.  floatIt : function(e){
    
          89.   var e,element=Drag.element;
    
          90.   var ghost=D.createElement("LI");
    
          91.   Drag.ghost=ghost;
    
          92.   ghost.className="module ghost";
    
          93.   ghost.style.height=element.offsetHeight-2+"px";
    
          94.   element.parentNode.insertBefore(ghost,element);
    
          95.   //創建模塊占位框
    
          96. 
    
          97.   var fDiv=D.createElement("UL");
    
          98.   Drag.fDiv=fDiv;
    
          99.   fDiv.className="float";
    
          100.   B.appendChild(fDiv);
    
          101.   fDiv.style.width=ghost.parentNode.offsetWidth+"px";
    
          102.   fDiv.appendChild(element);
    
          103.   //創建容納模塊的浮動層
    
          104. 
    
          105.   Drag.draging=true;
    
          106.  }
    
          107. }
    
          108. 
    
          109. var Drop={
    
          110.  root : null,
    
          111.  index : null,
    
          112.  column : null,
    
          113.  init : function(it){
    
          114.   if(!it)return;
    
          115.   Drop.root=it;
    
          116. 
    
          117.   it.firstItem=it.lastItem=null;
    
          118.   var a=it[GET]("ul");
    
          119.   for(var i=0;i<a.length;i++){
    
          120.    if(a[i].className!="column")continue;
    
          121.    if(it.firstItem==null){
    
          122.     it.firstItem=a[i];
    
          123.     a[i].previousItem=null;
    
          124.    }else{
    
          125.     a[i].previousItem=a[i-1];
    
          126.     a[i-1].nextItem=a[i];
    
          127.    }
    
          128.    a[i].nextItem=null;
    
          129.    it.lastItem=a[i];
    
          130.    a[i].index=i;
    
          131. 
    
          132.    a[i].firstItem=a[i].lastItem=null;
    
          133.    var b=a[i][GET]("li");
    
          134.    for(var j=0;j<b.length;j++){
    
          135.     if(b[j].className.indexOf("module")==-1)continue;
    
          136.     if(a[i].firstItem==null){
    
          137.      a[i].firstItem=b[j];
    
          138.      b[j].previousItem=null;
    
          139.     }else{
    
          140.      b[j].previousItem=b[j-1];
    
          141.      b[j-1].nextItem=b[j];
    
          142.     }
    
          143.     b[j].nextItem=null;
    
          144.     a[i].lastItem=b[j];
    
          145.     b[j].index=i+","+j;
    
          146.    }
    
          147.   }
    
          148.  },
    
          149.  measure : function(){
    
          150.   if(!Drop.root)return;
    
          151.   var currentColumn=Drop.root.firstItem;
    
          152.   while(currentColumn){
    
          153.    var currentModule=currentColumn.firstItem;
    
          154.    while(currentModule){
    
          155.     currentModule.minY=currentModule.offsetTop;
    
          156.     currentModule.maxY=currentModule.minY+currentModule.offsetHeight;
    
          157.     currentModule=currentModule.nextItem;
    
          158.    }
    
          159.    currentColumn.minX=currentColumn.offsetLeft;
    
          160.    currentColumn.maxX=currentColumn.minX+currentColumn.offsetWidth;
    
          161.    currentColumn=currentColumn.nextItem;
    
          162.   }
    
          163.   Drop.index=Drag.element.index;
    
          164.  },
    
          165.  drop : function(x,y){
    
          166.   if(!Drop.root)return;
    
          167.   var x,y,currentColumn=Drop.root.firstItem;
    
          168.   while(x>currentColumn.maxX)if(currentColumn.nextItem)currentColumn=currentColumn.nextItem;else break;
    
          169.   var currentModule=currentColumn.lastItem;
    
          170.   if(currentModule)while(y<currentModule.maxY){
    
          171.    if(y>currentModule.minY-12){
    
          172.     if(Drop.index==currentModule.index)return;
    
          173.     Drop.index=currentModule.index;
    
          174.     if(currentModule.index==Drag.element.index){if(currentModule.nextItem)currentModule=currentModule.nextItem;else break;}
    
          175.     currentColumn.insertBefore(Drag.ghost,currentModule);
    
          176.     Drop.column=null;
    
          177.     window.status=qq++;
    
          178.     return;
    
          179.    }else if(currentModule.previousItem)currentModule=currentModule.previousItem;else return;
    
          180.   }
    
          181.   if(Drop.column==currentColumn.index)return;
    
          182.   currentColumn.appendChild(Drag.ghost);
    
          183.   Drop.index=0;
    
          184.   Drop.column=currentColumn.index;
    
          185.   window.status=qq++;
    
          186.  }
    
          187. }
    
          188. 
    
          189. var webNote={
    
          190.  obj : null,
    
          191.  canEdit : function(e){
    
          192.   var e,element;
    
          193.   e=fixE(e);
    
          194.   element=fixElement(e);
    
          195.   if(element.className!='webNote')return;
    
          196.   if(typeof element.contentEditable!="undefined"){
    
          197.    element.contentEditable=true;
    
          198.    element.style.borderColor='red';
    
          199.    element.focus();
    
          200.    webNote.obj=element;
    
          201.   }
    
          202.  },
    
          203.  cannotEdit : function(){
    
          204.   if(!webNote.obj)return;
    
          205.   if(typeof webNote.obj.contentEditable!="undefined"){
    
          206.    webNote.obj.style.borderColor='#ffffe0';
    
          207.    webNote.obj.contentEditable=false;
    
          208.    webNote.obj=null;
    
          209.   }
    
          210.  }
    
          211. }
    
          212. 
    
          213. function fixE(e){var e;e=e?e:(window.event?window.event:null);return e}
    
          214. 
    
          215. function fixElement(e){var e;return e.target?(e.target.nodeType==3?e.target.parentNode:e.target):e.srcElement;}
    
          216. 
    
          217. 
    
          218. onload=function(){
    
          219.  B=D[GET]("body")[0];
    
          220.  H=D[GET]("html")[0];
    
          221.  Drop.init(D[GEI]("container"));
    
          222.  Drag.addEvent();
    
          223. }
    
          224. 
    
          225. function statu(e){
    
          226.  var e,element;
    
          227.  element=fixElement(e);
    
          228.  var aa=D.getElementById("aaa");
    
          229.  aa.innerHTML="e.xy:("+e.x+","+e.y+")<br/>e.offsetXY:("+e.offsetX+","+e.offsetY+")<br/>e.clientXY:("+e.clientX+","+e.clientY+")<br/>element.offsetLeftTop:("+element.offsetLeft+","+element.offsetTop+")<br/>e.layerXY:("+e.layerX+","+e.layerY+")";
    
          230. }
    
          231. 
    
          232. //-->
    
          233. </script>
    
          234. <style type="text/css">
    
          235. body,table,td,th,input,textarea,button,select{font:13px/16px Verdana,"宋體",sans-serif;}
    
          236. table{border-collapse:collapse;}
    
          237. p{margin:0px;}
    
          238. 
    
          239. .container{margin:8px;}
    
          240. .column{width:33%;margin:0px;padding:0px;float:left;overflow:hidden;}
    
          241. .module{margin:5px;padding:0px;border:1px solid #dcd;position:relative;background-color:white;list-style:none;}
    
          242. .title{background-color:#edf;padding:1px 0px;width:100%;overflow:hidden;cursor:move;z-index:0;font-weight:bold;}
    
          243. .cont{padding:3px;overflow:hidden;}
    
          244. .hide .cont{display:none;}
    
          245. 
    
          246. .pageTitle{font-weight:bold;text-align:center;}
    
          247. input.pageTitle{display:none;border:0px;padding:0px;width:100%;}
    
          248. .webNote{background-color:#ffffe0;border:1px solid #ffffe0;}
    
          249. textarea.webNote{display:none;overflow:hidden;padding:0px;border:0px;padding:0px;}
    
          250. 
    
          251. .ghost{border:1px dashed red;}
    
          252. .float{position:absolute;z-index:100;margin:0px;padding:0px;overflow:hidden;list-style:none;-moz-opacity:.75;filter:Alpha(opacity=75);}
    
          253. </style>
    
          254. <!--[if IE]>
    
          255. <script type="text/javascript">
    
          256. IE=true;
    
          257. </script>
    
          258. <style type="text/css">
    
          259. input.pageTitle{margin:-1px;}
    
          260. </style>
    
          261. <![endif]-->
    
          262. <![if !IE]><![endif]>
    
          263. </head>
    
          264. <body>
    
          265. <center><span class="pageTitle" onclick="with(this.nextSibling){value=this.innerHTML;style.display='block';focus()};this.style.display='none';">You can input a topic here!</span><input class="pageTitle" onblur="with(this.previousSibling){D.title=innerHTML=this.value?this.value:'Demo';style.display='block';};this.style.display='none'" /></center>
    
          266. 
    
          267. <div class="container" id="container">
    
          268.  <ul class="column">
    
          269.   <li class="module">
    
          270.    <div class="title"><span onclick="fold()">+</span> Coodinate</div>
    
          271.    <div class="cont" id="aaa">content</div>
    
          272.   </li>
    
          273.   <li class="module">
    
          274.    <div class="title"><span onclick="fold()">+</span> contentEditable</div>
    
          275.    <div class="cont" onclick="alert('this.contentEditable:'+this.contentEditable)">click here</div>
    
          276.   </li>
    
          277.   <li class="module">
    
          278.    <div class="title"><span onclick="fold()">+</span> long long ago</div>
    
          279.    <div class="cont">有形者 生于無形 無能生有 有歸于無<br/>是以 凡所有所相 皆是虛妄<br/>若是能見諸相非相 當知虛非真虛<br/>有生之氣 有形之狀 盡是幻也<br/>造物之所始 陰陽之所變者 謂之生 謂之死<br/>窮數達變 因形移易者 謂之化 謂之幻</br>了悟有無 參透虛實 自然遨游天地宇宙 無所阻礙<br/>是謂大幻之道</div>
    
          280.   </li>
    
          281.  </ul>
    
          282.  <ul class="column">
    
          283.   <li class="module">
    
          284.    <div class="title"><span onclick="fold()">+</span> this.parentNode</div>
    
          285.    <div class="cont"><button onclick="alert(this.parentNode.parentNode.parentNode.innerHTML)">parentNode</button></div>
    
          286.   </li>
    
          287.   <li class="module">
    
          288.    <div class="title"><span onclick="fold()">+</span> webNote</div>
    
          289.    <div class="cont"><div class="webNote" onblur="webNote.cannotEdit()" onclick="webNote.canEdit(event)">You can note something here.<br/><br/>從前有座山<br/>山里有座廟</br>廟里有個老和尚講故事</div><textarea class="webNote"></textarea></div>
    
          290.   </li>
    
          291.   <li class="module">
    
          292.    <div class="title"><span onclick="fold()">+</span> Google</div>
    
          293.    <div class="cont"><center><a  style="font:bold 31px/2 Arial;">Gooooooogle</a></center></div>
    
          294.   </li>
    
          295.  </ul>
    
          296.  <ul class="column">
    
          297.   <li class="module">
    
          298.    <div class="title"><span onclick="fold()">+</span> pia~~</div>
    
          299.    <div class="cont">十里平湖霜滿天<br/>寸寸青絲愁華年<br/>對月形單忘相護<br/>只羨鴛鴦不羨仙</div>
    
          300.   </li>
    
          301.   <li class="module">
    
          302.    <div class="title"><span onclick="fold()">+</span> biu~~</div>
    
          303.    <div class="cont">您好！<br/>主人不在，您可以在biu~的一聲后留言<br/>biu~~</div>
    
          304.   </li>
    
          305.   <li class="module">
    
          306.    <div class="title"><span onclick="fold()">+</span> 無話可說</div>
    
          307.    <div class="cont" id="bbb">吃葡萄不吐葡萄皮<br/>不吃葡萄倒吐葡萄皮<br/>(字數不夠,再吃一遍......)</div>
    
          308.   </li>
    
          309.  </ul>
    
          310. </div>
    
          311. 
    
          312. <div style="font-size:10px;line-height:14px;clear:both;margin:6px 3%;text-align:center;border:1px solid #eee;">©2006 forfor</div>
    
          313. </body>
    
          314. </html> 
            315. 

          
 
          
 
	
          posted on 2007-04-10 21:09 流浪汗 閱讀(2791) 評論(1)  編輯  收藏  所屬分類: 收藏夾 
          

          







          
	    
    


          
評論:

          
	

		
          
			
          
			# re: javascript 移動層代碼
				2008-04-02 16:32 | 李敬塔
          
				
          寫的好謝謝!  回復  更多評論
            
          
			
          
			
			
		
          
	








          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			


		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          

          
	
		
          
			


          
	


          

           
          
                      

          

			
          
	
          
		
          <2025年5月>
          
	
          日一二三四五六
          27282930123
          45678910
          11121314151617
          18192021222324
          25262728293031
          1234567
          

          

          
			

          留言簿(14)
          




		
          隨筆分類
          
		
				
			
	
		
          隨筆檔案
          
		
				
			
	
		
          文章分類
          
		
				
			
	
		
          文章檔案
          
		
				
			
	
		
          新聞分類
          
		
				
			
	
		
          新聞檔案
          
		
				
			
	
		
          收藏夾
          
		
				
			
	
		
          友情鏈接
          
		
				
			
	
		
          同學鏈接
          
		
				
            
			
				
          
			
	
		
          學習鏈接
          
		
				
			
	



          最新隨筆
          




          搜索
          

            
	
          • 
		
          •  
	
            • 

          


          積分與排名
          

            
	
          • 
		積分 -
		559664
	
          • 
		排名 -
		86
	
            • 

          


          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


          
	

          







    







          
        
	




主站蜘蛛池模板：
正宁县|
鄂托克前旗|
通许县|
彰化市|
政和县|
正蓝旗|
宜昌市|
乌兰浩特市|
盐津县|
静乐县|
法库县|
嵩明县|
翁牛特旗|
巴南区|
阿坝县|
寿阳县|
鸡东县|
密山市|
安国市|
贵阳市|
保靖县|
邻水|
麻阳|
晋州市|
紫金县|
冷水江市|
寿光市|
萝北县|
天全县|
海门市|
拉萨市|
阳新县|
金塔县|
浠水县|
凤山市|
本溪市|
高邮市|
宁德市|
唐河县|
博罗县|
盐亭县|