网页模块拖动效果实现

时间：2010-01-27 14:49:02 来源：评论：加载中... 点击：加载中...

网页模块拖动效果实现<script>//获取一个对象function getByid(id) {if (document.getElementById) {return document.getElementById(...

网页模块拖动效果实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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}.mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px}h1{margin:0px;padding:0px;text-align:left;font-size:12px;height:20px}h1 span{float:left}h1 font{float:right;cursor:pointer}</style><script>var dragobj={}window.onerror=function(){return false}window.oDel=function(obj){if($(obj)!=null){$(obj).parentNode.removeChild($(obj))}}var domid=12function 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})        Event.prototype.__defineGetter__("srcElement",function(){var node=this.target;while(node.nodeType!=1){node=node.parentNode}return node})    }    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;i<o.length;i++){        o[i].onmousedown=addevent    }}function addevent(e){            if(dragobj.o!=null)                return false            e=e||event            var ee=e.srcElement            if(ee.tagName=="FONT")                return            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.style.width=dragobj.xy[2]+"px"            dragobj.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"            var om=document.createElement("div")            dragobj.otemp=om            om.style.width=dragobj.xy[2]+"px"            om.style.height=dragobj.xy[3]+"px"            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){    e=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)    }}function getxy(e){    var a=new Array()    var t=e.offsetTop;    var l=e.offsetLeft;    var w=e.offsetWidth;    var h=e.offsetHeight;    while(e=e.offsetParent){        t+=e.offsetTop;        l+=e.offsetLeft;    }    a[0]=t;a[1]=l;a[2]=w;a[3]=hreturn 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){    for(var i=0;i<domid;i++){        if(!$("m"+i))            continue        if($("m"+i)==dragobj.o)            continue        var b=inner($("m"+i),e)        if(b==0)            continue        dragobj.otemp.style.width=$("m"+i).offsetWidth        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><span>dom"+domid+"</span><font onclick='del_div(this)'>x</font></h1><div class=nr><img src=aaaa.gif width=100 height=100></div>"    o.getElementsByTagName("h1")[0].onmousedown=addevent    domid++}function del_div(obj){    var o=obj.parentNode.parentNode    oDel(o)}</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><span>dom0</span><font onclick="del_div(this)">x</font></h1>            <div class="nr"></div>        </div>        <div class=mo id=m1>            <h1><span>dom1</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div>        </div>        <div class=mo id=m2><h1><span>dom2</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div>        <div class=mo id=m3><h1><span>dom3</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div>    </div>    <div class=center id=dom1>        <div class=mo id=m4><h1><span>dom4</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div>        <div class=mo id=m5><h1><span>dom5</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div>        <div class=mo id=m6><h1><span>dom6</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div>        <div class=mo id=m7><h1><span>dom7</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div>    </div>    <div class=right id=dom2>        <div class=mo id=m8><h1><span>dom8</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div>        <div class=mo id=m9><h1><span>dom9</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div>        <div class=mo id=m10><h1><span>dom10</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div>        <div class=mo id=m11><h1><span>dom11</span><font onclick="del_div(this)">x</font></h1><div class="nr"></div></div>    </div></div></body></html>

提示：可先修改再运行，如无效果，请刷新页面！

相关热词搜索：

收藏到网摘：

上一篇：javascript document对象属性
下一篇：javascript window对象属性

收藏将此文推荐给朋友

分享到：

推荐资讯

频道总排行

本频道月排行

评论排行

网页模块拖动效果实现 - javascript -

网页模块拖动效果实现

网页模块拖动效果实现