JS No refresh Add new layer, drag the div layer interchangeable location JavaScript implementation

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>js Add new layer without refresh </title>
<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 #0066CC;
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}
. Closediv{cursor:default;}
. Minusspan{cursor:default;}
. mo. nr{height:80px;border:1px solid #F3F3F3; margin:2px}
H1{MARGIN:0PX;PADDING:0PX;TEXT-ALIGN:LEFT;FONT-SIZE:12PX}
. dragging {
FILTER:progid:DXImageTransform.Microsoft.Alpha (opacity=60); opacity:0.6; moz-opacity:0.6
}
</style>
<script language= "JavaScript" >
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.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;
Add Collapse and Close buttons
var tt = document.createelement ("div");
Tt.style.cssText = "Float:left";

var span = document.createelement ("span");
span.innerhtml = "--" +o[i].innerhtml;
Span.style.cssText = "cursor:default;";
Span.onmousedown = Minusdiv;
Tt.appendchild (span);

var close = document.createelement ("div");
close.innerhtml = "X";
Close.style.cssText = "Cursor:default;float:right";
Close.onmousedown = Closediv;
o[i].innerhtml = "";
O[i].appendchild (TT);
O[i].appendchild (Close);
}
}
Collapse or display layers
function Minusdiv (e)
{
e=e| | Event
var nr = this.parentNode.parentNode.nextSibling; Get content Layer
Nr.style.display = nr.style.display== ""? " None ":";
}
Move out Layer
function Closediv (e)
{
e=e| | Event
var mdiv = This.parentNode.parentNode; Get the target layer
Odel (MDiv);
}
function Addevent (e) {
if (dragobj.o!=null)
return False
e=e| | Event
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.classname = ' dragging ';
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"
Dragobj.o.style.filter= ' alpha (opacity=60) '; Add a drag transparency effect
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 red"; Ikaiser Add, implement dashed box
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, DRAGOBJ.O)//Pass the current drag object
}
}
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]=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;
}
Changes the size of the current dragged layer as it is dragged, previewing the effect
function Createtmpl (e, elm) {
for (Var i=0;i<domid;i++) {
if (document.getElementById ("M" +i) = = null)//The layer that has been moved is no longer traversed
Continue
if ($ ("M" +i) ==DRAGOBJ.O)
Continue
var B=inner ($ ("M" +i), E)
if (b==0)
Continue
dragobj.otemp.style.width=$ ("M" +i). offsetwidth
Elm.style.width = $ ("M" +i). offsetwidth;
1 for Move down, 2 for up
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= "O.getelementsbytagname ("H1") [0].onmousedown=addevent
domid++
}
</script>
<body>
<input type= "button" value= "Add a new div layer" onclick= "add_div ();" >
<div class= "Content" >
<div class= "left" id=dom0>
<div class= "Mo" id=m0>
<div class= "NR" ></div>
</div>
<div class= "Mo" id=m1>
</div>
<div class= "Mo" Id=m2><div class= "Mo" Id=m3></div>
<div class= "center" id=dom1>
<div class= "Mo" Id=m4><div class= "Mo" Id=m5></div>
<div class= "right" id=dom2>
<div class= "Mo" Id=m8><div class= "Mo" Id=m9></div>
</div>
<div>http://www.999jiujiu.com/</div>
</body>

JS No refresh Add new layer, drag the div layer interchangeable location JavaScript implementation