可拖动的层DIV的完整源代码
来源:互联网 发布:corel有多少软件 编辑:程序博客网 时间:2024/05/21 00:52
这里提供的是一个默认包含4行3列共计12个可以拖动可以隐藏的层的网页的完整源代码,直接复制保存就可以使用。
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <style>
- body {margin:0px;padding:0px;font-size:12px;text-align:center;}
- body > div {text-align:center; margin-right:auto; margin-left:auto;}
- .content{width:900px;}
- .content .left{
- float:left;
- width:20%;
- border:1px solid #FF0000;
- margin:3px;
- }
- .content .center{float:left;border:1px solid #FF0000;margin:3px;width:57%}
- .content .right{float:right;width:20%;border:1px solid #FF0000;margin:3px}
- .mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF}
- .mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move}
- .closediv{cursor:default;}
- .minusspan{cursor:default;}
- .mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px}
- h1{margin:0px;padding:0px;text-align:left;font-size:12px}
- .dragging {
- FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=60); opacity: 0.6; moz-opacity: 0.6
- }
- </style>
- <script language="javascript">
- /*
- zuoxinwu@gmail.com 2007-9-12 改动
- 1、添加拖动层时的虚线框
- 2、添加拖动层时的半透明效果
- 3、加入层折叠和关闭功能
- */
- var dragobj={}
- window.onerror=function(){return false}
- var domid=12
- function on_ini(){
- String.prototype.inc=function(s){return this.indexOf(s)>-1?true:false}
- var agent=navigator.userAgent
- window.isOpr=agent.inc("Opera")
- window.isIE=agent.inc("IE")&&!isOpr
- window.isMoz=agent.inc("Mozilla")&&!isOpr&&!isIE
- if(isMoz){
- Event.prototype.__defineGetter__("x",function(){return this.clientX+2})
- Event.prototype.__defineGetter__("y",function(){return this.clientY+2})
- }
- basic_ini()
- }
- function basic_ini(){
- window.$=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
- window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
- }
- window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}
- window.onload=function(){
- on_ini()
- var o=document.getElementsByTagName("h1")
- for(var i=0;i<o.length;i++){
- o[i].onmousedown=addevent;
- //添加折叠和关闭按钮
- var tt = document.createElement("div");
- tt.style.cssText = "float:left";
- var span = document.createElement("span");
- span.innerHTML = "--"+o[i].innerHTML;
- span.style.cssText = "cursor:default;";
- span.onmousedown = minusDiv;
- tt.appendChild(span);
- var close = document.createElement("div");
- close.innerHTML = "X";
- close.style.cssText = "cursor:default;float:right";
- close.onmousedown = closeDiv;
- o[i].innerHTML = "";
- o[i].appendChild(tt);
- o[i].appendChild(close);
- }
- }
- //折叠或者显示层
- function minusDiv(e)
- {
- ee=e||event
- var nr = this.parentNode.parentNode.nextSibling; //取得内容层
- nrnr.style.display = nr.style.display==""?"none":"";
- }
- //移出层
- function closeDiv(e)
- {
- ee=e||event
- var mdiv = this.parentNode.parentNode; //取得目标层
- oDel(mdiv);
- }
- function addevent(e){
- if(dragobj.o!=null)
- return false
- ee=e||event
- dragobj.o=this.parentNode
- dragobj.xy=getxy(dragobj.o)
- dragobj.xx=new Array((e.x-dragobj.xy[1]),(e.y-dragobj.xy[0]))
- //dragobj.o.className = 'dragging';
- dragobjdragobj.o.style.width=dragobj.xy[2]+"px"
- dragobjdragobj.o.style.height=dragobj.xy[3]+"px"
- dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
- dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
- dragobj.o.style.position="absolute"
- dragobj.o.style.filter='alpha(opacity=60)'; //添加拖动透明效果
- var om=document.createElement("div")
- dragobj.otemp=om
- om.style.width=dragobj.xy[2]+"px"
- om.style.height=dragobj.xy[3]+"px"
- om.style.border = "1px dashed red"; //实现红色的虚线框
- dragobj.o.parentNode.insertBefore(om,dragobj.o)
- return false
- }
- document.onselectstart=function(){return false}
- window.onfocus=function(){document.onmouseup()}
- window.onblur=function(){document.onmouseup()}
- document.onmouseup=function(){
- if(dragobj.o!=null){
- dragobj.o.style.width="auto"
- dragobj.o.style.height="auto"
- dragobj.otemp.parentNode.insertBefore(dragobj.o,dragobj.otemp)
- dragobj.o.style.position=""
- oDel(dragobj.otemp)
- dragobj={}
- }
- }
- document.onmousemove=function(e){
- ee=e||event
- if(dragobj.o!=null){
- dragobj.o.style.left=(e.x-dragobj.xx[0])+"px"
- dragobj.o.style.top=(e.y-dragobj.xx[1])+"px"
- createtmpl(e, dragobj.o) //传递当前拖动对象
- }
- }
- function getxy(e){
- var a=new Array()
- var t=e.offsetTop;
- var l=e.offsetLeft;
- var w=e.offsetWidth;
- var h=e.offsetHeight;
- while(ee=e.offsetParent){
- t+=e.offsetTop;
- l+=e.offsetLeft;
- }
- a[0]=t;a[1]=l;a[2]=w;a[3]=h
- return a;
- }
- function inner(o,e){
- var a=getxy(o)
- if(e.x>a[1]&&e.x<(a[1]+a[2])&&e.y>a[0]&&e.y<(a[0]+a[3])){
- if(e.y<(a[0]+a[3]/2))
- return 1;
- else
- return 2;
- }else
- return 0;
- }
- //将当前拖动层在拖动时可变化大小,预览效果
- function createtmpl(e, elm){
- for(var i=0;i<domid;i++){
- if(document.getElementById("m"+i) == null) //已经移出的层不再遍历
- continue;
- if($("m"+i)==dragobj.o)
- continue
- var b=inner($("m"+i),e)
- if(b==0)
- continue
- dragobj.otemp.style.width=$("m"+i).offsetWidth
- elm.style.width = $("m"+i).offsetWidth;
- //1为下移,2为上移
- if(b==1){
- $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i))
- }else{
- if($("m"+i).nextSibling==null){
- $("m"+i).parentNode.appendChild(dragobj.otemp)
- }else{
- $("m"+i).parentNode.insertBefore(dragobj.otemp,$("m"+i).nextSibling)
- }
- }
- return
- }
- for(var j=0;j<3;j++){
- if($("dom"+j).innerHTML.inc("div")||$("dom"+j).innerHTML.inc("DIV"))
- continue
- var op=getxy($("dom"+j))
- if(e.x>(op[1]+10)&&e.x<(op[1]+op[2]-10)){
- $("dom"+j).appendChild(dragobj.otemp)
- dragobj.otemp.style.width=(op[2]-10)+"px"
- }
- }
- }
- function add_div()
- {
- var o=document.createElement("div")
- o.className="mo"
- o.id="m"+domid
- $('dom0').appendChild(o)
- o.innerHTML="<h1>dom"+domid+"</h1><div class=nr></div>"
- o.getElementsByTagName("h1")[0].onmousedown=addevent
- domid++
- }
- </script>
- </head>
- <body>
- <INPUT TYPE="button" value="添加DIV" onclick="add_div();">
- <div class=content>
- <div class=left id=dom0>
- <div class=mo id=m0>
- <h1>dom0</h1>
- <div class="nr"></div>
- </div>
- <div class=mo id=m1>
- <h1>dom1</h1><div class="nr"></div>
- </div>
- <div class=mo id=m2><h1>dom2</h1><div class="nr"></div></div>
- <div class=mo id=m3><h1>dom3</h1><div class="nr"></div></div>
- </div>
- <div class=center id=dom1>
- <div class=mo id=m4><h1>dom4</h1><div class="nr"></div></div>
- <div class=mo id=m5><h1>dom5</h1><div class="nr"></div></div>
- <div class=mo id=m6><h1>dom6</h1><div class="nr"></div></div>
- <div class=mo id=m7><h1>dom7</h1><div class="nr"></div></div>
- </div>
- <div class=right id=dom2>
- <div class=mo id=m8><h1>dom8</h1><div class="nr"></div></div>
- <div class=mo id=m9><h1>dom9</h1><div class="nr"></div></div>
- <div class=mo id=m10><h1>dom10</h1><div class="nr"></div></div>
- <div class=mo id=m11><h1>dom11</h1><div class="nr"></div></div>
- </div>
- </div>
- </body>
- </html>
- 可拖动的层DIV的完整源代码
- 可拖动的div弹出层
- 简单可拖动的div层
- 可自由拖动的DIV层方块
- 可拖动DIV层的实现方法
- 可拖动的层
- 可拖动的层
- 可拖动的DIV
- 可拖动的div
- 可拖动的div
- 可拖动的div
- 可拖动的DIV
- 可拖动的DIV
- 可拖动的div
- 可拖动的div
- 可拖动的DIV
- 可拖动的DIV
- 可拖动的DIV
- 发一个试试
- linux多线程学习(一)
- 中文化和国际化问题权威解析之一:字符编码发展历程
- JavaBean 转 Map
- Hibernate 2与Hibernate 3的区别
- 可拖动的层DIV的完整源代码
- Java 中Iterator 、Vector、ArrayList、List 使用深入剖析
- 如何在C++获得系统时间
- 如何在Solaris下使用USB存储设备
- JavaScript 函数库的未来
- 1月13日,我永远都会记得的日子.
- PHP防灌水计算器(TIME_TO_SEC)的问题
- vc多线程编程
- Java集合对象排序测试