Drag layout Save layout page Cookies _javascript tips

I implemented the method is to record each column has a drag object, so that at the beginning or refresh when the column has to read which drag objects, directly drag the object through the Appenchild to add in it, such as dragging the column ID is col2, in this column of the Drag object ID is col1_2,col3_1 , Col2_1, I recorded the col2=col1_2|col3_1|col2_1, read the col2 value while refreshing the page, and cycled through document.getElementById (col2). AppendChild ( document.getElementById (Col1_2)) implements the results of the display layout. Oh! I don't know what I said, but look at the following code should be clear. Good nonsense say less, see the implementation of the Code bar!!
First you have to save the dragged records, one is through the database, one is a cookie, I am using cookies. The following is a class of cookies

Copy Code code as follows:

function Cookieclass () {
this.expires = 0; Effective time, in minutes
This.path = ""; Set Access Path
This.domain = ""; Set Access Host
This.secure = false; Set security
This.setcookie = function (name,value) {
var str = name+ "=" +escape (value);
if (this.expires>0) {//If an expiration time is set
var date=new date ();
var ms=this.expires * 60 * 1000; 60 seconds per minute, 1000 milliseconds per second
Date.settime (Date.gettime () +ms);
str+= "; Expires= "+date.togmtstring ();
}
if (this.path!= "") str+= "; Path= "+this.path; Set Access Path
if (this.domain!= "") str+= "; Domain= "+this.domain; Set Access Host
if (this.secure!= "") str+= "; True "; Set security
DOCUMENT.COOKIE=STR;
}
This.getcookie=function (name) {
var cookiearray=document.cookie.split (";"); Get the split cookie name value pair
var cookie=new Object ();
for (Var i=0;i<cookiearray.length;i++) {
var arr=cookiearray[i].split ("="); Separating names and values
if (arr[0]==name) return unescape (arr[1]); If it is the specified cookie, its value is returned
}
Return "";
}
This.deletecookie=function (name) {
var date=new date ();
var ms= 1 * 1000;
Date.settime (Date.gettime ()-MS);
var str = name+ "=NO; Expires= "+ date.togmtstring (); Set the expiration time to the past to remove a cookie
DOCUMENT.COOKIE=STR;
}
This.showcookie=function () {
Alert (unescape (Document.cookie));
}
}

OK, now use this thing to save the dragged result. The result of the save is, of course, the OnMouseUp event, because only the mouse is loosened to show that the drag is over, so add the following code to the OnMouseUp event.

Copy Code code as follows:

//-------------------------
var cook = new Cookieclass ();
Cook.expires =1;//One minute effective
//---------------------------
var dragcontainer=["col1", "col2", "Col3"];//the ID of the div used to implement the layout of the column
var dragcontainerlen=dragcontainer.length;
The code above should not be explained
Mouse Loose
function MouseUp () {
if (dragobject) {
if (dragobject.parentnode.style.display== "none") dragobject.parentnode.style.display= "block";
Dragobject.parentnode.style.border= "1px solid #FFCC66";
Tmpdiv.style.display= "None";
for (Var m=0;m<dragcontainer.length;m++) {
var Coldiv=document.getelementbyid (dragcontainer[m]);
var coldivlen=coldiv.getelementsbytagname ("div"). length
var colsty=coldiv.getattribute ("style");
if (coldivlen>0&&colsty!=null) {
Coldiv.removeattribute ("style");
Break
}
}
This is the added code-----------------------------------------------
for (Var ed=0;ed<dragcontainerlen;ed++) {
var dragconid=dragcontainer[ed];
var Dragobj=document.getelementbyid (Dragconid);
Dragobj.removeattribute ("style");
var dragdiv=dragobj.getelementsbytagname ("div");
if (dragdiv) {
var dragdivlen=dragdiv.length;
var dragdividarr=[];
for (Var dd=0;dd<dragdivlen;dd++) {
var dragdivid=dragdiv[dd].getattribute ("id");
Dragdividarr[dd]=dragdivid;
}
Tmp=dragdividarr.join ("|");
if (tmp== "") tmp=0;
}
Cook.setcookie (DRAGCONID,TMP);
}
This is the added code------------------------------------------------------
Dragobject=null;
return false;
}
}

The added code is to write something like Col1=col2_1|col3_2 to a cookie. The rest is to read the cookie when the page is refreshed or the page starts to load, and realize the final result of the drag layout, which is, of course, in the onload

Copy Code code as follows:

var nl=0;
var dragnull=[];
Window.onload=function () {
Tmpdiv=document.createelement ("div");
TmpDiv.style.cssText = ' position:absolute;display:none;border:1px dotted #FFCC66; ';
Document.body.appendChild (TMPDIV);
This is the added code
for (Var init=0;init<dragcontainerlen;init++) {
var initdragid=dragcontainer[init];
var Initdragcontainer=document.getelementbyid (Initdragid);
var Initdragdiv=cook.getcookie (Initdragid);
if (initdragdiv!=0) {
var initdragarr=initdragdiv.split ("|");
var initdragarrlen=initdragarr.length;
for (Var k=0;k<initdragarrlen;k++) {
var Chi=document.getelementbyid (Initdragarr[k]);
Initdragcontainer.appendchild (CHI);
}
}
else{
Dragnull[nl]=initdragid;
nl=nl+1;
}
}
if (nl>0&&nl<3) {
var nulllen=dragnull.length;
for (Var nn=0;nn<nulllen;nn++) {
var nullid=dragnull[nn];
var Nulldiv=document.getelementbyid (nullid);
Nulldiv.style.height= "20px";
}
}
This is the added code
}

Well, so much, see what I said to see the code, the lack of local welcome advice (feel a bug, sometimes seems not, and so have time to study)!!