index.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. var dragobj={}
  2. window.onerror=function(){return false}
  3. var domid=12
  4. function on_ini(){
  5. String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
  6. var agent=navigator.userAgent
  7. window.isOpr=agent.inc("Opera")
  8. window.isIE=agent.inc("IE")&&!isOpr
  9. window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE
  10. if(isMoz){
  11. Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
  12. Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
  13. }
  14. basic_ini()
  15. }
  16. function basic_ini(){
  17. window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
  18. window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
  19. }
  20. window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
  21. window.onload=function(){
  22. on_ini()
  23. var o=document.getElementsByTagName("h1")
  24. for(var i=0;i<o.length;i++){
  25. o[i].onmousedown=addevent;
  26. //添加折叠和关闭按钮
  27. var tt = document.createElement("div");
  28. tt.style.cssText = "float:left;";
  29. var span = document.createElement("span");
  30. span.innerHTML = ""+o[i].innerHTML;
  31. span.onmousedown = minusDiv;
  32. tt.appendChild(span);
  33. var pic = document.createElement("div");
  34. pic.innerHTML = "<img src='images/default/index/index-title-pic.gif'/>";
  35. pic.className = "div-container-pic";
  36. var m = document.createElement("div");
  37. m.innerHTML = "<img src='images/default/index/index-title-m.gif'/>";
  38. m.className = "div-container-m";
  39. m.onmousedown = minusDiv;
  40. var close = document.createElement("div");
  41. close.innerHTML = "<img src='images/default/index/index-title-close.gif'/>";
  42. close.className = "div-container-close";
  43. close.onmousedown = closeDiv;
  44. o[i].innerHTML = "";
  45. o[i].appendChild(pic);
  46. o[i].appendChild(tt);
  47. o[i].appendChild(close);
  48. o[i].appendChild(m);
  49. }
  50. }
  51. //折叠或者显示层
  52. function minusDiv(e)
  53. {
  54. e=e||event
  55. var nr = this.parentNode.nextSibling; //取得内容层
  56. nr.style.display = nr.style.display==""?"none":"";
  57. }
  58. //移出层
  59. function closeDiv(e)
  60. {
  61. e=e||event
  62. var mdiv = this.parentNode.parentNode; //取得目标层
  63. oDel(mdiv);
  64. }
  65. function addevent(e){
  66. if(dragobj.o!=null)
  67. return false
  68. e=e||event
  69. dragobj.o=this.parentNode
  70. dragobj.xy=getxy(dragobj.o)
  71. dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))
  72. //dragobj.o.className = 'dragging';
  73. dragobj.o.style.width=dragobj.xy[2]+"px"
  74. dragobj.o.style.height=dragobj.xy[3]+"px"
  75. dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
  76. dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
  77. dragobj.o.style.position="absolute"
  78. dragobj.o.style.filter='alpha(opacity=60)'; //添加拖动透明效果
  79. var om=document.createElement("div")
  80. dragobj.otemp=om
  81. om.style.width=dragobj.xy[2]+"px"
  82. om.style.height=dragobj.xy[3]+"px"
  83. om.style.border = "1px dashed #034587"; //实现红色的虚线框
  84. dragobj.o.parentNode.insertBefore(om,dragobj.o)
  85. return false
  86. }
  87. document.onselectstart=function(){return false}
  88. window.onfocus=function(){document.onmouseup()}
  89. window.onblur=function(){document.onmouseup()}
  90. document.onmouseup=function(){
  91. if(dragobj.o!=null){
  92. dragobj.o.style.width="auto"
  93. dragobj.o.style.height="auto"
  94. dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)
  95. dragobj.o.style.position=""
  96. oDel(dragobj.otemp)
  97. dragobj={}
  98. }
  99. }
  100. document.onmousemove=function(e){
  101. e=e||event
  102. if(dragobj.o!=null){
  103. dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
  104. dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
  105. createtmpl(e, dragobj.o) //传递当前拖动对象
  106. }
  107. }
  108. function getxy(e){
  109. var a=new Array()
  110. var t=e.offsetTop;
  111. var l=e.offsetLeft;
  112. var w=e.offsetWidth;
  113. var h=e.offsetHeight;
  114. while(e=e.offsetParent){
  115. t+=e.offsetTop;
  116. l+=e.offsetLeft;
  117. }
  118. a[0]=t;a[1]=l;a[2]=w;a[3]=h
  119. return a;
  120. }
  121. function inner(o,e){
  122. var a=getxy(o)
  123. if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3])){
  124. if(e.y<(a[0]+a[3]/2))
  125. return 1;
  126. else
  127. return 2;
  128. }else
  129. return 0;
  130. }
  131. //将当前拖动层在拖动时可变化大小,预览效果
  132. function createtmpl(e, elm){
  133. for(var i=0;i<domid;i++){
  134. if(document.getElementById("m"+i) == null) //已经移出的层不再遍历
  135. continue;
  136. if($("m"+i)==dragobj.o)
  137. continue
  138. var b=inner($("m"+i),e)
  139. if(b==0)
  140. continue
  141. dragobj.otemp.style.width=$("m"+i).offsetWidth
  142. elm.style.width = $("m"+i).offsetWidth;
  143. //1为下移,2为上移
  144. if(b==1){
  145. $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))
  146. }else{
  147. if($("m"+i).nextSibling==null){
  148. $("m"+i).parentNode.appendChild(dragobj.otemp)
  149. }else{
  150. $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)
  151. }
  152. }
  153. return
  154. }
  155. for(var j=0;j<3;j++){
  156. if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV"))
  157. continue
  158. var op=getxy($("dom"+j))
  159. if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10)){
  160. $("dom"+j).appendChild(dragobj.otemp)
  161. dragobj.otemp.style.width=(op[2]-10)+"px"
  162. }
  163. }
  164. }
  165. function add_div()
  166. {
  167. var o=document.createElement("div")
  168. o.className="div-container"
  169. o.id="m"+domid
  170. $('dom0').appendChild(o)
  171. o.innerHTML="<h1>dom"+domid+"</h1><div class=nr></div>"
  172. o.getElementsByTagName("h1")[0].onmousedown=addevent
  173. domid++
  174. }