随笔-153  评论-235  文章-19  trackbacks-0
javascript 移动层代码

几种不同的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);
  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);
  194. }
  195. //-->
  196. </script>
  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. }
  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>[



样式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. },
  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();
  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>



样式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;
  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. }
  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,
  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.   //测试
  47.   if(element.className!="title")return;
  48.   element=element.parentNode;
  49.   Drag.element=element;
  50.   //以上获得当前移动的模块
  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.   //鼠标相对于模块的位置
  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.   //创建模块占位框
  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.   //创建容纳模块的浮动层
  105.   Drag.draging=true;
  106.  }
  107. }
  109. var Drop={
  110.  root : null,
  111.  index : null,
  112.  column : null,
  113.  init : function(it){
  114.   if(!it)return;
  115.   Drop.root=it;
  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;
  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. }
  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. }
  213. function fixE(e){var e;e=e?e:(window.event?window.event:null);return e}
  215. function fixElement(e){var e;return e.target?(e.target.nodeType==3?e.target.parentNode:e.target):e.srcElement;}
  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. }
  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. }
  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;}
  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;}
  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;}
  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>
  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 href="http://www.google.com" 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>
  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>
 
posted on 2007-04-10 21:09 流浪汗 阅读(2778) 评论(1)  编辑  收藏 所属分类: 收藏夹

评论:
# re: javascript 移动层代码 2008-04-02 16:32 | 李敬塔
写的好谢谢!  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 流浪汗