资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
页面自定义拖拽布局
<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} .mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px} h1{margin:0px;padding:0px;text-align:left;font-size:12px} </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Avar%20dragobj%3D%7B%7D%20%0D%0Awindow.onerror%3Dfunction()%7Breturn%20false%7D%20%0D%0Afunction%20on_ini()%7B%20%0D%0A%20%20%20%20String.prototype.inc%3Dfunction(s)%7Breturn%20this.indexOf(s)%3E-1%3Ftrue%3Afalse%7D%20%0D%0A%20%20%20%20var%20agent%3Dnavigator.userAgent%20%0D%0A%20%20%20%20window.isOpr%3Dagent.inc(%22Opera%22)%20%0D%0A%20%20%20%20window.isIE%3Dagent.inc(%22IE%22)%26%26!isOpr%20%0D%0A%20%20%20%20window.isMoz%3Dagent.inc(%22Mozilla%22)%26%26!isOpr%26%26!isIE%20%0D%0A%20%20%20%20if(isMoz)%7B%20%0D%0A%20%20%20%20%20%20%20%20Event.prototype.__defineGetter__(%22x%22%2Cfunction()%7Breturn%20this.clientX%2B2%7D)%20%0D%0A%20%20%20%20%20%20%20%20Event.prototype.__defineGetter__(%22y%22%2Cfunction()%7Breturn%20this.clientY%2B2%7D)%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20basic_ini()%20%0D%0A%7D%20%0D%0Afunction%20basic_ini()%7B%20%0D%0A%20%20%20%20window.%24%3Dfunction(obj)%7Breturn%20typeof(obj)%3D%3D%22string%22%3Fdocument.getElementById(obj)%3Aobj%7D%20%0D%0A%20%20%20%20window.oDel%3Dfunction(obj)%7Bif(%24(obj)!%3Dnull)%7B%24(obj).parentNode.removeChild(%24(obj))%7D%7D%20%0D%0A%7D%20%0D%0Awindow.onload%3Dfunction()%7B%20%0D%0A%20%20%20%20on_ini()%20%0D%0A%20%20%20%20var%20o%3Ddocument.getElementsByTagName(%22h1%22)%20%0D%0A%20%20%20%20for(var%20i%3D0%3Bi%3Co.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20o%5Bi%5D.onmousedown%3Dfunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(dragobj.o!%3Dnull)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20false%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20e%3De%7C%7Cevent%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.o%3Dthis.parentNode%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.xy%3Dgetxy(dragobj.o)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.xx%3Dnew%20Array((e.x-dragobj.xy%5B1%5D)%2C(e.y-dragobj.xy%5B0%5D))%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.o.style.width%3Ddragobj.xy%5B2%5D%2B%22px%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.o.style.height%3Ddragobj.xy%5B3%5D%2B%22px%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.o.style.left%3D(e.x-dragobj.xx%5B0%5D)%2B%22px%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.o.style.top%3D(e.y-dragobj.xx%5B1%5D)%2B%22px%22%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.o.style.position%3D%22absolute%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20om%3Ddocument.createElement(%22div%22)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.otemp%3Dom%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20om.style.width%3Ddragobj.xy%5B2%5D%2B%22px%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20om.style.height%3Ddragobj.xy%5B3%5D%2B%22px%22%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.o.parentNode.insertBefore(om%2Cdragobj.o)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20false%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Adocument.onselectstart%3Dfunction()%7Breturn%20false%7D%20%0D%0Awindow.onfocus%3Dfunction()%7Bdocument.onmouseup()%7D%20%0D%0Awindow.onblur%3Dfunction()%7Bdocument.onmouseup()%7D%20%0D%0Adocument.onmouseup%3Dfunction()%7B%20%0D%0A%20%20%20%20if(dragobj.o!%3Dnull)%7B%20%0D%0A%20%20%20%20%20%20%20%20dragobj.o.style.width%3D%22auto%22%20%0D%0A%20%20%20%20%20%20%20%20dragobj.o.style.height%3D%22auto%22%20%0D%0A%20%20%20%20%20%20%20%20dragobj.otemp.parentNode.insertBefore(dragobj.o%2Cdragobj.otemp)%20%0D%0A%20%20%20%20%20%20%20%20dragobj.o.style.position%3D%22%22%20%0D%0A%20%20%20%20%20%20%20%20oDel(dragobj.otemp)%20%0D%0A%20%20%20%20%20%20%20%20dragobj%3D%7B%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Adocument.onmousemove%3Dfunction(e)%7B%20%0D%0A%20%20%20%20e%3De%7C%7Cevent%20%0D%0A%20%20%20%20if(dragobj.o!%3Dnull)%7B%20%0D%0A%20%20%20%20%20%20%20%20dragobj.o.style.left%3D(e.x-dragobj.xx%5B0%5D)%2B%22px%22%20%0D%0A%20%20%20%20%20%20%20%20dragobj.o.style.top%3D(e.y-dragobj.xx%5B1%5D)%2B%22px%22%20%0D%0A%20%20%20%20%20%20%20%20createtmpl(e)%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Afunction%20getxy(e)%7B%20%0D%0A%20%20%20%20var%20a%3Dnew%20Array()%20%0D%0A%20%20%20%20var%20t%3De.offsetTop%3B%20%0D%0A%20%20%20%20var%20l%3De.offsetLeft%3B%20%0D%0A%20%20%20%20var%20w%3De.offsetWidth%3B%20%0D%0A%20%20%20%20var%20h%3De.offsetHeight%3B%20%0D%0A%20%20%20%20while(e%3De.offsetParent)%7B%20%0D%0A%20%20%20%20%20%20%20%20t%2B%3De.offsetTop%3B%20%0D%0A%20%20%20%20%20%20%20%20l%2B%3De.offsetLeft%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20a%5B0%5D%3Dt%3Ba%5B1%5D%3Dl%3Ba%5B2%5D%3Dw%3Ba%5B3%5D%3Dh%20%0D%0A%20%20return%20a%3B%20%0D%0A%7D%20%0D%0Afunction%20inner(o%2Ce)%7B%20%0D%0A%20%20%20%20var%20a%3Dgetxy(o)%20%0D%0A%20%20%20%20if(e.x%3Ea%5B1%5D%26%26e.x%3C(a%5B1%5D%2Ba%5B2%5D)%26%26e.y%3Ea%5B0%5D%26%26e.y%3C(a%5B0%5D%2Ba%5B3%5D))%7B%20%0D%0A%20%20%20%20%20%20%20%20if(e.y%3C(a%5B0%5D%2Ba%5B3%5D%2F2))%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%201%3B%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%202%3B%20%0D%0A%20%20%20%20%7Delse%20%0D%0A%20%20%20%20%20%20%20%20return%200%3B%20%0D%0A%7D%20%0D%0Afunction%20createtmpl(e)%7B%20%0D%0A%20%20%20%20for(var%20i%3D0%3Bi%3C12%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(%24(%22m%22%2Bi)%3D%3Ddragobj.o)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20continue%20%0D%0A%20%20%20%20%20%20%20%20var%20b%3Dinner(%24(%22m%22%2Bi)%2Ce)%20%0D%0A%20%20%20%20%20%20%20%20if(b%3D%3D0)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20continue%20%0D%0A%20%20%20%20%20%20%20%20dragobj.otemp.style.width%3D%24(%22m%22%2Bi).offsetWidth%20%0D%0A%20%20%20%20%20%20%20%20if(b%3D%3D1)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22m%22%2Bi).parentNode.insertBefore(dragobj.otemp%2C%24(%22m%22%2Bi))%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(%24(%22m%22%2Bi).nextSibling%3D%3Dnull)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22m%22%2Bi).parentNode.appendChild(dragobj.otemp)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24(%22m%22%2Bi).parentNode.insertBefore(dragobj.otemp%2C%24(%22m%22%2Bi).nextSibling)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20for(var%20j%3D0%3Bj%3C3%3Bj%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(%24(%22dom%22%2Bj).innerHTML.inc(%22div%22)%7C%7C%24(%22dom%22%2Bj).innerHTML.inc(%22DIV%22))%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20continue%20%0D%0A%20%20%20%20%20%20%20%20var%20op%3Dgetxy(%24(%22dom%22%2Bj))%20%0D%0A%20%20%20%20%20%20%20%20if(e.x%3E(op%5B1%5D%2B10)%26%26e.x%3C(op%5B1%5D%2Bop%5B2%5D-10))%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22dom%22%2Bj).appendChild(dragobj.otemp)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20dragobj.otemp.style.width%3D(op%5B2%5D-10)%2B%22px%22%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </head> <body> <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>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程