类似google的可拖动div层网页布局，支持firefox，样式可自定义
2014-10-03 11:55
441 查看
类似google的可拖动div层网页布局，支持firefox，样式可自定义
近来还是比较流行这种应用，而且论坛的人问得也多，每次去查很麻烦，就转在这里，方便查找。原文地址在下面。可能是我转载的那个转载的排版存在问题，不能直接运行。我进行了修改。现在的代码可以直接运行了。
[xhtml] view
plaincopy
<html>
<head>
<title>拖动div</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<mce: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
}
--></mce:style><style mce_bogus="1"> 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>
<mce:script type="text/javascript"><!--
var dragobj = {}
window.onerror = function() {
return false
}
//判断浏览器
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; i < o.length; i++){
o[i].onmousedown = function(e) {
if (dragobj.o != null) return false;
e = e || event;
dragobj.o = this.parentNode //上一层节点h1的div
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" //div的宽
dragobj.o.style.height = dragobj.xy[3] + "px" //div的高
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)'; //拖动透明效果(IE)
dragobj.o.style.opacity = '0.6' //拖动透明效果(firefox)
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 black"; //显示虚线边框
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;//e距离上方或上层控件的位置，整型
var l=e.offsetLeft;//e距离左方或上层控件的位置，整型
var w=e.offsetWidth;
var h=e.offsetHeight;
while(e=e.offsetParent){//offsetParent是body因为没有相对或绝对定位
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)
{
var k = document.getElementsByTagName("h1")
for(var i=0;i<k.length;i++){
if($("m"+i)==dragobj.o) continue
var b=inner($("m"+i),e)
if(b==0) continue
dragobj.otemp.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"
}
}
}
// --></mce:script>
</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 class=mo id=m12><h1>dom12</h1><div class="nr"></div></div>
</div>
</div>
</body>
</html>
原文地址:http://www.corange.cn/archives/2008/12/2757.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 类似google的可拖动div层网页布局，支持firefox，样式可自定义
- 类似google的可拖动div层网页布局，支持firefox，样式可自定义
- 类似google支持firefox的拖曳层效果
- 类似Google个性首页的页面自定义拖拽布局
- 仿google拖动，使用DIV技术。支持IE和firefox
- 网页HTML右侧浮动DIV层广告或在线客服图片框最佳代码(支持Firefox&IE)
- 类似Google个性首页的页面自定义拖拽布局
- 类似Google个性首页的页面自定义拖拽布局
- IE、Firefox使用绝对定位(absolote) 网页居中布局 支持IE7,8,FF
- FireFox网页布局时候内容需自动换行时float属性不起作用
- 写了一个jquery.imagesview插件，支持图片拖动、缩放类似ACDSEE效果
- 《精通CSS.DIV网页样式与布局》配套视频教程2
- 【转】Ajax实现拖动的个性化网页布局。
- IE和Firefox浏览器CSS网页布局不同点
- FireFox网页布局时候内容需自动换行时float属性不起作用
- 仿google拖动布局（原创）
- 如何制作类似msn（QQ）等网页中的拖动效果（二）
- 网页设计中列表标记<lu>如何自定义样式？
- 如何制作类似msn（QQ）等网页中的拖动效果
- 网页拖动布局