本文介绍了一种Javaｓｃｒｉｐｔ实现div层拖动并动态增加新图层的方法，供大家参考，具体分析如下：

没有刷新添加一个新的div层，并且可以实现图层拖动，拖动鼠标图层的移动位置，js部分作为一个新文件保存，当从外部引入时，拖动层代码非常流行，GG和雅虎等大型网站经常可以看到这种效果。





拖动div层以动态增加新层的Javaｓｃｒｉｐｔ。

Body {margin:0px; padding:0px; font-size:12px; text-align:center;}
正文>文本对齐：中心；边缘正确：自动；左边空白：自动；}
。内容{宽度：900px；}
内容，左{
浮点数：左；
宽度：20%；
边境：1px solid # 0066cc；
保证金：3px；
}
内容，中心{
浮点数：左；
边境：1px solid # FF0000；
保证金：3px；
宽度：57%
}
内容，右{
浮子：右边；
宽度：20%；
边境：1px solid # FF0000；
保证金：3px
}
莫{。
高度：自动；
边境：1px solid # CCC；
保证金：3px；
背景：# FFF
}
MO H1 {
背景：# ecf9ff；
身高：18px；
填料：3px；
移动光标：
}
closediv {。
游标：默认值；
}
minusspan {。
游标：默认值；
}
mo.nr {。
身高：80px；
边境：1px solid # f3f3f3；
保证金：2px
}
h1 {
保证金：0px；
填料：0px；
文本对齐：左对齐；
字体大小：12px
}
{。拖动
过滤器：ProgID：DXImageTransform.Microsoft.Alpha（不透明度60）；
不透明性：0.6；
不透明度：0.6个
}


无功drabj = { }
窗口。误差=函数（）{ return false }
无功domid = 12
功能on_ini（）{
字符串。原型。公司=函数（）{ return this.indexof（S）> - 1true：假}
代理= navigator.useragent VaR
窗口。isopr = agent.inc（歌剧）
窗口。议= agent.inc（即）！isopr
窗口。ismoz = agent.inc（Mozilla）！isopr！议
如果（ismoz）{
事件的原型。__definegetter__（X
事件的原型。__definegetter__（Y
}
basic_ini（）
}
功能basic_ini（）{
窗口。$ =功能（obj）{ return typeof（obj）= =字符串document.getelementbyid（obj）：obj }
窗口模式=功能（obj）{ if（$（obj）！= null（obj））{ $。parentnode.removechild（$（obj）} }）
}
窗口模式=功能（obj）{ if（$（obj）！= null（obj））{ $。parentnode.removechild（$（obj）} }）
窗口。指针函数（）{
on_ini（）
var o = document.getelementsbytagname（H1）
对于（var i = 0；i < o.length；i++）{
O {我}。onmousedown = AddEvent；
添加折叠和关闭按钮
VaR TT = document.createelement（div）；
tt.style.csstext =浮动：左；

VaR跨度= document.createelement（跨）；
span.innerhtml = + O {我} .innerHTML；
span.style.csstext =光标：默认；；
span.onmousedown = minusdiv；
tt.appendchild（跨度）；

VAR密切= document.createelement（div）；
close.innerhtml =X；
close.style.csstext =光标：默认；浮动权；
Close.onmousedown = closeDiv;
O {我} .innerHTML = ；
O {我}。appendChild（TT）；
O {我}。appendChild（关闭）；
}
}
折叠或显示层
功能minusdiv（E）
{
E = E | |事件
VaR NR = / /得到this.parentnode.parentnode.nextsibling；内容层
nr.style.display = nr.style显示= =。无；
}
/输出层
功能closediv（E）
{
E = E | |事件
VaR道学硕士= this.parentnode.parentnode； / /得到目标层
ODel（道学硕士）；
}
函数AddEvent（e）{
如果（drabj啊！= null）
返回false
E = E | |事件
drabj。O = this.parentnode
Drabj。XY = getxy（drabj。O）
Drabj。XX =新的数组（（e.x-drabj。XY { 1 }），（e.y-drabj。XY { 0 }））
/ / drabj.o.classname = 'dragging；
Drabj。o.style。宽度= drabj。XY { 2 } +PX
Drabj.o.style.height=drabj.xy{3}+ PX
Drabj。o.style。左=（e.x-drabj。XX { 0 }）+PX
Drabj。o.style。=（e.y-drabj。XX { 1 }）+PX
Drabj。o.style。位置=绝对
Drabj。o.style。过滤器= 'alpha（不透明度60）'； / /添加拖动透明效果
VaR OM = document.createelement（div）
Drabj otemp = OM。
唵。风格。宽度= drabj。XY { 2 } +PX
唵。风格。高度= drabj。XY { 3 } +PX
om.style.border = 1px冲红； / / ikaiser添加到实现一个虚线框
drabj.o.parentnode.insertbefore（OM，drabj。O）
返回false
}
文件。onselectstart =函数（）{ return false }
窗口。onfocus =函数（）{ document.onmouseup（）}
窗口。onblur =函数（）{ document.onmouseup（）}
文件。onmouseup =函数（）{
如果（drabj啊！= NULL）{
Drabj。o.style。宽度=汽车
Drabj。o.style。高度=汽车
drabj.otemp.parentnode.insertbefore（drabj。啊，drabj。otemp）
Drabj。o.style位置= 。
ODel（drabj。otemp）
drabj = { }
}
}
文件。移动鼠标=功能（e）{
E = E | |事件
如果（drabj啊！= NULL）{
Drabj。o.style。左=（e.x-drabj。XX { 0 }）+PX
Drabj。o.style。=（e.y-drabj。XX { 1 }）+PX
Createtmpl（E，drabj。O） / /转移电流拖动对象
}
}
功能getxy（e）{
var =新数组（）
var t = e.offsettop；
var = e.offsetleft；
无功W = e.offsetwidth；
var H = e.offsetheight；
而（E = e.offsetparent）{
T = e.offsettop；
L = e.offsetleft；
}
{ 0 }；{ 1 } = l；{ 2 } = w；{ 3 } = h
返回一个；
}
函数内部（o，e）{
创建一个getxy（O）
如果（到>一{ 1 } e.xa { 0 }大肠杆菌<（一{ 0 } + { 3 }））{
如果（大肠杆菌<（一{ 0 } + { 3 } / 2））
返回1；
其他的
返回2；
}其他
返回0；
}
拖动拖动中的当前图层可以改变大小，预览
功能createtmpl（E，ELM）{
对于（var i = 0；i < domid；i++）{
如果（document.getelementbyid（M +我）= = null） / /已被删除从层不再穿越
继续；
If ($(m +i) ==drabj.o)
继续
var（=）
如果（b＝0）
继续
Drabj。otemp。风格。宽度= $（M+我）。offsetwidth
elm.style.width = $（M+我）。OffsetWidth；
1移动，2移动。
如果（b = 1）{
$（M+我）。ParentNode.insertBefore（drabj.otemp，$（M+我））
其他{ }
如果（$（M+我= =）。nextSibling null）{
$（M+我）。ParentNode.appendChild（drabj。otemp）
其他{ }
$（M+我）。ParentNode.insertBefore（drabj.otemp，$（M+我）。NextSibling）
}
}
返回
}
对于（var j＝0；j＜3；j + +）{
如果（$（DOM + J）。InnerHTML.inc（div）| | $（DOM + J）。InnerHTML.inc（div））
继续
VaR OP = getxy（$（DOM+ J））
如果（到>（OP { 1 } + 10）到<<（OP { 1 } + OP { 2 } - 10））{
$（DOM+ J）。AppendChild（drabj。otemp）
Drabj。otemp。风格。宽度=（OP { 2 } - 10）+PX
}
}
}
add_div（）函数
{
var o = document.createelement（div）
o.classname =莫
o.id =米+ domid
$（'dom0）。AppendChild（O）
o.innerhtml =DOM+ domid +
o.getelementsbytagname（H1）{ 0 }。onmousedown = AddEvent
domid + +
}







做



DOM1

DOM2
DOM3


dom4
dom5


dom8
dom9






希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。