JS实现页面的拖动布局
2008-07-21 17:32
549 查看
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} .mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px} h1{margin:0px;padding:0px;text-align:left;font-size:12px} 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.onload=function(){ on_ini() var o=document.getElementsByTagName("h1") for(var i=0;ia[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){ for(var i=0;i(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="dom"+domid+"
" o.getElementsByTagName("h1")[0].onmousedown=addevent domid++ }dom0
dom1
dom2
dom3
dom4
dom5
dom6
dom7
dom8
dom9
dom10
dom11
相关文章推荐
- DIV+AJAX+JS+JSP实现页面拖动并且保存布局COOKIE值到数据库
- 实现页面元素拖动效果的JS函数
- 由于设计页面需要,要把两个并排显示的 div 实现一样高的效果, n 行 n 列布局,每列高度(事先并不能确定哪列的高度)相同,每个设计师追求的目标。方法有以下几种: 1 JS 实现(判断 2 个 d
- js实现web套打功能,支持拖动布局,支持按键移动支持打印预览,结果可保存至数据库中
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件
- DIV+CSS+JS实现的可以随意拖动的网页布局
- js实现div在页面中的拖动
- js实现div在页面拖动效果
- gridster.js 页面任意拖动布局保存数据库。
- 实现页面元素拖动效果的JS函数
- 酷! 不同风格页面布局幻灯片特效js实现
- js实现div在页面拖动效果
- jquery实现页面控件拖动效果js代码
- 用js实现页面布局的滑动门和TAB
- .NET中利用js让子窗体向父页面传值的实现方法
- JS实现页面跳转的几种方式
- Js实现无刷新添加新层,拖动DIV层可互换位置
- js实现页面局部刷新