您的位置:首页 > Web前端 > JavaScript

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: