随笔-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. function ShowHide(id,dis){
  188. var bdisplay = (dis==null)?((document.getElementById("xMsg"+id).style.display=="")?"none":""):dis
  189. document.getElementById("xMsg"+id).style.display = bdisplay;
  190. document.getElementById("xMsg"+id+"bg").style.display = bdisplay;
  191. alert (bdisplay);
  192. }
  193. //-->
  194. </script>
  195. <script language='JScript'>
  196. <!--
  197. function initialize()
  198. {
  199. var a = new xWin("1",250,180,10,100,"窗口1","");
  200. var b = new xWin("2",250,180,10,140,"窗口2","Welcome to visited my personal website:感谢您的关注!");
  201. var c = new xWin("3",250,180,270,100,"窗口3","Copyright by <a href='#'>Wildwind</a>!");
  202. var d = new xWin("4",250,180,270,140,"窗口4","Copyright by <a href='#'>Wildwind</a>!");
  203. //ShowHide("1","none");//隐藏窗口1
  204. //ShowHide("2","none");//隐藏窗口2
  205. //ShowHide("3","none");//隐藏窗口3
  206. min(Nav_1.childNodes[1]);//最小化窗口1
  207. min(Nav_2.childNodes[1]);//最小化窗口2
  208. min(Nav_3.childNodes[1]);//最小化窗口3
  209. min(Nav_4.childNodes[1]);//最小化窗口4
  210. }
  211. window.onload = initialize;
  212. </script>
  213. </head>
  214. <base target="_blank">
  215. <body onselectstart='return false' oncontextmenu='return false' >
  216. <p><span onClick="min(Nav_1.childNodes[1]);">窗口1最小化</span>
  217. <a onClick="ShowHide('1',null);return false;" href="">窗口1</a>
  218. <a onClick="ShowHide('2',null);return false;" href="">窗口2</a>
  219. <a onClick="ShowHide('3',null);return false;" href="">窗口3</a></p>
  220. <div id="main">main</div>
  221. <p> </p>
  222. </body>
  223. </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. },
  57. draging:function(){//重要:判断MOUSE的位置
  58.  if(!Drag.dragged||Drag.ao==null)return;
  59.  var tX=event.clientX;
  60.  var tY=event.clientY;
  61.  Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
  62.  Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
  63.  for(var i=0;i<parentTable.cells.length;i++){
  64.   var parentCell=Drag.getInfo(parentTable.cells[i]);
  65.   if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
  66.    var subTables=parentTable.cells[i].getElementsByTagName("table");
  67.    if(subTables.length==0){
  68.     if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
  69.      parentTable.cells[i].appendChild(Drag.ao);
  70.     }
  71.     break;
  72.    }
  73.    for(var j=0;j<subTables.length;j++){
  74.     var subTable=Drag.getInfo(subTables[j]);
  75.     if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){
  76.      parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
  77.      break;
  78.     }else{
  79.      parentTable.cells[i].appendChild(Drag.ao);
  80.     } 
  81.    }
  82.   }
  83.  }
  84. }
  85. ,
  86. dragEnd:function(){
  87.  if(!Drag.dragged)return;
  88.  Drag.dragged=false;
  89.  Drag.mm=Drag.repos(150,15);
  90.  Drag.ao.style.borderWidth="0px";
  91.  Drag.ao.style.borderTop="1px solid #3366cc";
  92.  Drag.tdiv.style.borderWidth="0px";
  93.  Drag.ao.style.zIndex=1;
  94. },
  95. getInfo:function(o){//取得坐标
  96.  var to=new Object();
  97.  to.left=to.right=to.top=to.bottom=0;
  98.  var twidth=o.offsetWidth;
  99.  var theight=o.offsetHeight;
  100.  while(o!=document.body){
  101.   to.left+=o.offsetLeft;
  102.   to.top+=o.offsetTop;
  103.   o=o.offsetParent;
  104.  }
  105.   to.right=to.left+twidth;
  106.   to.bottom=to.top+theight;
  107.  return to;
  108. },
  109. repos:function(aa,ab){
  110.  var f=Drag.tdiv.filters.alpha.opacity;
  111.  var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
  112.  var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
  113.  var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
  114.  var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
  115.  var kf=f/ab;
  116.  return setInterval(function(){if(ab<1){
  117.        clearInterval(Drag.mm);
  118.        Drag.tdiv.removeNode(true);
  119.        Drag.ao=null;
  120.        return;
  121.       }
  122.      ab--;
  123.      tl-=kl;
  124.      tt-=kt;
  125.      f-=kf;
  126.      Drag.tdiv.style.left=parseInt(tl)+"px";
  127.      Drag.tdiv.style.top=parseInt(tt)+"px";
  128.      Drag.tdiv.filters.alpha.opacity=f;
  129.     }
  130. ,aa/ab)
  131. },
  132. inint:function(){//初始化
  133.  for(var i=0;i<parentTable.cells.length;i++){
  134.   var subTables=parentTable.cells[i].getElementsByTagName("table");
  135.   for(var j=0;j<subTables.length;j++){
  136.    if(subTables[j].className!="dragTable")break;
  137.    subTables[j].rows[0].className="dragTR";
  138.    subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
  139.   }
  140.  }
  141.  document.onmousemove=Drag.draging;
  142.  document.onmouseup=Drag.dragEnd;
  143. }
  144. //end of Object Drag
  145. }
  146. Drag.inint();
  147. function _show(str){
  148.  var w=window.open('','');
  149.  var d=w.document;
  150.  d.open();
  151.  str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"=\"$1\"$2");
  152.  str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2></span><br />");
  153.  str=str.replace(/\r/g,"<br />\n");
  154.  d.write(str);
  155. }
  156. </script>
  157. </head>
  158. <body>
  159. <table border="0" cellpadding="0" cellspacing="10" width="100%" height=500 id="parentTable">
  160. <tr >
  161.  <td width="25%" valgin="top">
  162.   <table border=0 class="dragTable" cellspacing="0">
  163.    <tr>
  164.     <td><b>GMAIL</b></td>
  165.    </tr>
  166.    <tr>
  167.     <td>暂时无法显示GMAIL内容</td>
  168.    <tr>
  169.   </table><table border=0 class="dragTable" cellspacing="0">
  170.    <tr>
  171.     <td>新浪体育</td>
  172.    </tr>
  173.    <tr>
  174.     <td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖:辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑:中韩唱主角 美加施冷箭</td>
  175.    <tr>
  176.   </table>
  177.   <table border=0 class="dragTable" cellspacing="0">
  178.    <tr>
  179.     <td>焦点</td>
  180.    </tr>
  181.    <tr>
  182.     <td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选
  183. 解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 »</td>
  184.    <tr>
  185.   </table>
  186.  </td>
  187.  <td width="25%">
  188.   <table border=0 class="dragTable" cellspacing="0">
  189.    <tr>
  190.     <td>中关村在线</td>
  191.    </tr>
  192.    <tr>
  193.     <td>新年行情速递 双敏板卡低价推荐 终于等到了,映泰6600GT一降降一百 罗技G15游戏键盘热力促销,代购价仅529元 </td>
  194.    <tr>
  195.   </table></td>
  196.  <td width="25%">
  197.   <table border=0 class="dragTable" cellspacing="0">
  198.    <tr>
  199.     <td>网易商业</td>
  200.    </tr>
  201.    <tr>
  202.     <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
  203.    <tr>
  204.   </table>  <table border=0 class="dragTable" cellspacing="0">
  205.    <tr>
  206.     <td>黑可天下</td>
  207.    </tr>
  208.    <tr>
  209.     <td>上海GDP增幅去年出现回落应对反倾销 中国鞋企联手对抗欧盟尹家绪操盘南方汽车 长安谋求曲线整体境外上市</td>
  210.    <tr>
  211.   </table>
  212.  </td>
  213. </tr>
  214. </table>
  215. <input type="button" value="SHOW" onClick="_show(document.documentElement.innerHTML)" />
  216. </body>
  217. </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;
  12. function fold(){
  13.  var e;
  14.  e=fixE(e);
  15.  if(e)element=fixElement(e);
  16.  element=element.parentNode.parentNode;
  17.  element.className=element.className.indexOf("hide")>0?"module":"module hide";
  18. }
  19. var Drag={
  20.  draging : false,
  21.  x : 0,
  22.  y : 0,
  23.  element : null,
  24.  fDiv : null,
  25.  ghost : null,
  26.  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;},
  27.  ix:2,iy:7,
  28.  ox:6,oy:7,
  29.  fx:6,fy:6,
  30.  dragStart : function (e){
  31.   if(Drag.draging)return;
  32.   var e;
  33.   e=fixE(e);
  34.   if(e)element=fixElement(e);
  35.   
  36.   /*********
  37.   var k,s="";
  38.   for(k in element)s+=k+" : "+element[k]+"<br/>";
  39.   D.getElementById("bbb").innerHTML=s;
  40.   **********/
  41.   D.getElementById("aaa").innerHTML=element.parentNode.offsetTop+ ","+element.parentNode.offsetHeight;
  42.   //测试
  43.   if(element.className!="title")return;
  44.   element=element.parentNode;
  45.   Drag.element=element;
  46.   //以上获得当前移动的模块
  47.   Drag.x=e.layerX?e.layerX+Drag.fx:(IE?e.x+Drag.ix:e.offsetX+Drag.ox);
  48.   Drag.y=e.layerY?e.layerY+Drag.fy:(IE?e.y+Drag.iy:e.offsetY+Drag.oy);
  49.   //鼠标相对于模块的位置
  50.   Drop.measure();
  51.   if(e.layerX){Drag.floatIt(e);Drag.drag(e);}//fix FF
  52.   B.style.cursor="move";
  53.   D.onmousemove=Drag.drag;
  54.   D.ondragstart=function(){window.event.returnValue = false;}
  55.   D.onselectstart=function(){window.event.returnValue = false;};
  56.   D.onselect=function(){return false};
  57.   D.onmouseup=element.onmouseup=Drag.dragEnd;
  58.   element.onmousedown=null;
  59.  },
  60.  drag : function (e){
  61.   var e;
  62.   e=fixE(e);
  63.   if(!Drag.fDiv)Drag.floatIt(e);//for IE & Opera
  64.   var x=e.clientX,y=e.clientY;
  65.   Drag.fDiv.style.top=y+H.scrollTop-Drag.y+"px";
  66.   Drag.fDiv.style.left=x+H.scrollLeft-Drag.x+"px";
  67.   Drop.drop(x,y);
  68.   //statu(e);
  69.  },
  70.  dragEnd : function (e){
  71.   B.style.cursor="";
  72.   D.ondragstart=D.onmousemove=D.onselectstart=D.onselect=D.onmouseup=null;
  73.   Drag.element.onmousedown=Drag.dragStart;
  74.   if(!Drag.draging)return;
  75.   Drag.ghost.parentNode.insertBefore(Drag.element,Drag.ghost);
  76.   Drag.ghost.parentNode.removeChild(Drag.ghost);
  77.   B.removeChild(Drag.fDiv);
  78.   Drag.fDiv=null;
  79.   Drag.draging=false;
  80.   Drop.init(D[GEI]("container"));
  81.  },
  82.  floatIt : function(e){
  83.   var e,element=Drag.element;
  84.   var ghost=D.createElement("LI");
  85.   Drag.ghost=ghost;
  86.   ghost.className="module ghost";
  87.   ghost.style.height=element.offsetHeight-2+"px";
  88.   element.parentNode.insertBefore(ghost,element);
  89.   //创建模块占位框
  90.   var fDiv=D.createElement("UL");
  91.   Drag.fDiv=fDiv;
  92.   fDiv.className="float";
  93.   B.appendChild(fDiv);
  94.   fDiv.style.width=ghost.parentNode.offsetWidth+"px";
  95.   fDiv.appendChild(element);
  96.   //创建容纳模块的浮动层
  97.   Drag.draging=true;
  98.  }
  99. }
  100. var Drop={
  101.  root : null,
  102.  index : null,
  103.  column : null,
  104.  init : function(it){
  105.   if(!it)return;
  106.   Drop.root=it;
  107.   it.firstItem=it.lastItem=null;
  108.   var a=it[GET]("ul");
  109.   for(var i=0;i<a.length;i++){
  110.    if(a[i].className!="column")continue;
  111.    if(it.firstItem==null){
  112.     it.firstItem=a[i];
  113.     a[i].previousItem=null;
  114.    }else{
  115.     a[i].previousItem=a[i-1];
  116.     a[i-1].nextItem=a[i];
  117.    }
  118.    a[i].nextItem=null;
  119.    it.lastItem=a[i];
  120.    a[i].index=i;
  121.    a[i].firstItem=a[i].lastItem=null;
  122.    var b=a[i][GET]("li");
  123.    for(var j=0;j<b.length;j++){
  124.     if(b[j].className.indexOf("module")==-1)continue;
  125.     if(a[i].firstItem==null){
  126.      a[i].firstItem=b[j];
  127.      b[j].previousItem=null;
  128.     }else{
  129.      b[j].previousItem=b[j-1];
  130.      b[j-1].nextItem=b[j];
  131.     }
  132.     b[j].nextItem=null;
  133.     a[i].lastItem=b[j];
  134.     b[j].index=i+","+j;
  135.    }
  136.   }
  137.  },
  138.  measure : function(){
  139.   if(!Drop.root)return;
  140.   var currentColumn=Drop.root.firstItem;
  141.   while(currentColumn){
  142.    var currentModule=currentColumn.firstItem;
  143.    while(currentModule){
  144.     currentModule.minY=currentModule.offsetTop;
  145.     currentModule.maxY=currentModule.minY+currentModule.offsetHeight;
  146.     currentModule=currentModule.nextItem;
  147.    }
  148.    currentColumn.minX=currentColumn.offsetLeft;
  149.    currentColumn.maxX=currentColumn.minX+currentColumn.offsetWidth;
  150.    currentColumn=currentColumn.nextItem;
  151.   }
  152.   Drop.index=Drag.element.index;
  153.  },
  154.  drop : function(x,y){
  155.   if(!Drop.root)return;
  156.   var x,y,currentColumn=Drop.root.firstItem;
  157.   while(x>currentColumn.maxX)if(currentColumn.nextItem)currentColumn=currentColumn.nextItem;else break;
  158.   var currentModule=currentColumn.lastItem;
  159.   if(currentModule)while(y<currentModule.maxY){
  160.    if(y>currentModule.minY-12){
  161.     if(Drop.index==currentModule.index)return;
  162.     Drop.index=currentModule.index;
  163.     if(currentModule.index==Drag.element.index){if(currentModule.nextItem)currentModule=currentModule.nextItem;else break;}
  164.     currentColumn.insertBefore(Drag.ghost,currentModule);
  165.     Drop.column=null;
  166.     window.status=qq++;
  167.     return;
  168.    }else if(currentModule.previousItem)currentModule=currentModule.previousItem;else return;
  169.   }
  170.   if(Drop.column==currentColumn.index)return;
  171.   currentColumn.appendChild(Drag.ghost);
  172.   Drop.index=0;
  173.   Drop.column=currentColumn.index;
  174.   window.status=qq++;
  175.  }
  176. }
  177. var webNote={
  178.  obj : null,
  179.  canEdit : function(e){
  180.   var e,element;
  181.   e=fixE(e);
  182.   element=fixElement(e);
  183.   if(element.className!='webNote')return;
  184.   if(typeof element.contentEditable!="undefined"){
  185.    element.contentEditable=true;
  186.    element.style.borderColor='red';
  187.    element.focus();
  188.    webNote.obj=element;
  189.   }
  190.  },
  191.  cannotEdit : function(){
  192.   if(!webNote.obj)return;
  193.   if(typeof webNote.obj.contentEditable!="undefined"){
  194.    webNote.obj.style.borderColor='#ffffe0';
  195.    webNote.obj.contentEditable=false;
  196.    webNote.obj=null;
  197.   }
  198.  }
  199. }
  200. function fixE(e){var e;e=e?e:(window.event?window.event:null);return e}
  201. function fixElement(e){var e;return e.target?(e.target.nodeType==3?e.target.parentNode:e.target):e.srcElement;}
  202. onload=function(){
  203.  B=D[GET]("body")[0];
  204.  H=D[GET]("html")[0];
  205.  Drop.init(D[GEI]("container"));
  206.  Drag.addEvent();
  207. }
  208. function statu(e){
  209.  var e,element;
  210.  element=fixElement(e);
  211.  var aa=D.getElementById("aaa");
  212.  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+")";
  213. }
  214. //-->
  215. </script>
  216. <style type="text/css">
  217. body,table,td,th,input,textarea,button,select{font:13px/16px Verdana,"宋体",sans-serif;}
  218. table{border-collapse:collapse;}
  219. p{margin:0px;}
  220. .container{margin:8px;}
  221. .column{width:33%;margin:0px;padding:0px;float:left;overflow:hidden;}
  222. .module{margin:5px;padding:0px;border:1px solid #dcd;position:relative;background-color:white;list-style:none;}
  223. .title{background-color:#edf;padding:1px 0px;width:100%;overflow:hidden;cursor:move;z-index:0;font-weight:bold;}
  224. .cont{padding:3px;overflow:hidden;}
  225. .hide .cont{display:none;}
  226. .pageTitle{font-weight:bold;text-align:center;}
  227. input.pageTitle{display:none;border:0px;padding:0px;width:100%;}
  228. .webNote{background-color:#ffffe0;border:1px solid #ffffe0;}
  229. textarea.webNote{display:none;overflow:hidden;padding:0px;border:0px;padding:0px;}
  230. .ghost{border:1px dashed red;}
  231. .float{position:absolute;z-index:100;margin:0px;padding:0px;overflow:hidden;list-style:none;-moz-opacity:.75;filter:Alpha(opacity=75);}
  232. </style>
  233. <!--[if IE]>
  234. <script type="text/javascript">
  235. IE=true;
  236. </script>
  237. <style type="text/css">
  238. input.pageTitle{margin:-1px;}
  239. </style>
  240. <![endif]-->
  241. <![if !IE]><![endif]>
  242. </head>
  243. <body>
  244. <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>
  245. <div class="container" id="container">
  246.  <ul class="column">
  247.   <li class="module">
  248.    <div class="title"><span onclick="fold()">+</span> Coodinate</div>
  249.    <div class="cont" id="aaa">content</div>
  250.   </li>
  251.   <li class="module">
  252.    <div class="title"><span onclick="fold()">+</span> contentEditable</div>
  253.    <div class="cont" onclick="alert('this.contentEditable:'+this.contentEditable)">click here</div>
  254.   </li>
  255.   <li class="module">
  256.    <div class="title"><span onclick="fold()">+</span> long long ago</div>
  257.    <div class="cont">有形者 生于无形 无能生有 有归于无<br/>是以 凡所有所相 皆是虚妄<br/>若是能见诸相非相 当知虚非真虚<br/>有生之气 有形之状 尽是幻也<br/>造物之所始 阴阳之所变者 谓之生 谓之死<br/>穷数达变 因形移易者 谓之化 谓之幻</br>了悟有无 参透虚实 自然遨游天地宇宙 无所阻碍<br/>是谓大幻之道</div>
  258.   </li>
  259.  </ul>
  260.  <ul class="column">
  261.   <li class="module">
  262.    <div class="title"><span onclick="fold()">+</span> this.parentNode</div>
  263.    <div class="cont"><button onclick="alert(this.parentNode.parentNode.parentNode.innerHTML)">parentNode</button></div>
  264.   </li>
  265.   <li class="module">
  266.    <div class="title"><span onclick="fold()">+</span> webNote</div>
  267.    <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>
  268.   </li>
  269.   <li class="module">
  270.    <div class="title"><span onclick="fold()">+</span> Google</div>
  271.    <div class="cont"><center><a href="http://www.google.com" style="font:bold 31px/2 Arial;">Gooooooogle</a></center></div>
  272.   </li>
  273.  </ul>
  274.  <ul class="column">
  275.   <li class="module">
  276.    <div class="title"><span onclick="fold()">+</span> pia~~</div>
  277.    <div class="cont">十里平湖霜满天<br/>寸寸青丝愁华年<br/>对月形单忘相护<br/>只羡鸳鸯不羡仙</div>
  278.   </li>
  279.   <li class="module">
  280.    <div class="title"><span onclick="fold()">+</span> biu~~</div>
  281.    <div class="cont">您好!<br/>主人不在,您可以在biu~的一声后留言<br/>biu~~</div>
  282.   </li>
  283.   <li class="module">
  284.    <div class="title"><span onclick="fold()">+</span> 无话可说</div>
  285.    <div class="cont" id="bbb">吃葡萄不吐葡萄皮<br/>不吃葡萄倒吐葡萄皮<br/>(字数不够,再吃一遍......)</div>
  286.   </li>
  287.  </ul>
  288. </div>
  289. <div style="font-size:10px;line-height:14px;clear:both;margin:6px 3%;text-align:center;border:1px solid #eee;">©2006 forfor</div>
  290. </body>
  291. </html>
 
posted on 2007-04-10 21:09 流浪汗 阅读(2724) 评论(1)  编辑  收藏 所属分类: 收藏夹

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

只有注册用户登录后才能发表评论。


网站导航: