<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        




    
	
		
		
    

隨筆-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 流浪汗 閱讀(2787) 評論(1)  編輯  收藏  所屬分類: 收藏夾 
    

    







    
	    
    


    
評論:

    
	

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








    





    


    

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


    

		    		
		
    
		
    			
		
		
		
		
    
		
    
		
		
    
		
    
			網站導航:
		
		
    
		
    
			


		
    	
		
    
			 
		
    
		
    
			
		
    
		
    
			
				
		
    		
	
    	

    



    

				

    








    







    
        
	



主站蜘蛛池模板：
亚洲综合国产一区二区三区|
亚洲国产精品综合久久2007|
亚洲AV无码一区二区三区人|
免费播放在线日本感人片|
日韩亚洲国产二区|
亚洲精品蜜夜内射|
大学生高清一级毛片免费|
久久久无码精品亚洲日韩按摩|
一级黄色免费毛片|
免费观看午夜在线欧差毛片|
亚洲欧好州第一的日产suv|
在线观看日本免费a∨视频|
久久夜色精品国产噜噜亚洲AV|
成年女人毛片免费播放视频m|
亚洲色在线无码国产精品不卡|
欧美三级在线电影免费|
亚洲制服丝袜中文字幕|
啦啦啦中文在线观看电视剧免费版
|
日韩精品视频免费在线观看|
亚洲国产91在线|
国产成人精品日本亚洲专区61|
一个人在线观看视频免费|
免费萌白酱国产一区二区三区|
色窝窝亚洲av网|
亚洲国产香蕉人人爽成AV片久久
|
亚洲大片免费观看|
91麻豆精品国产自产在线观看亚洲
|
亚洲αv久久久噜噜噜噜噜|
AAA日本高清在线播放免费观看|
国产人成亚洲第一网站在线播放|
男女啪啪永久免费观看网站|
国产成人亚洲毛片|
精品国产日韩亚洲一区|
国产成人久久AV免费|
亚洲精品午夜久久久伊人|
青青久在线视频免费观看|
国产无遮挡无码视频免费软件
|
成在线人免费无码高潮喷水|
亚洲gv猛男gv无码男同短文|
免费jjzz在线播放国产
|
国产高清免费在线|