Drag layout: Save layout page cookies

The method I implemented is to record the drag objects in each column, so that the drag objects in this column can be read during the initial or refresh, and the drag objects can be directly added through appenChild, for example, if the column id is col2 and the drag Object id is col1_2, col3_1, col2_1, we will record col2 = col1_2 | col3_1 | col2_1, when you refresh the page, read the value of col2 and use document. getElementById (col2 ). appendChild (document. getElementById (col1_2) to display the layout results. Haha! I don't know what I mean, but I should be clear when I look at the code below. Let's talk about the implementation code !!
First, we need to save the dragged record. One is through the database, the other is the cookie, and the other is the cookie. The following is a cookie class

Copy codeThe Code is as follows: function CookieClass (){
This. expires = 0; // valid time, in minutes
This. path = ""; // set the access path
This. domain = ""; // set the access host
This. secure = false; // set security
This. setCookie = function (name, value ){
Var str = name + "=" + escape (value );
If (this. expires> 0) {// if the 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 the access path
If (this. domain! = "") Str + = "; domain =" + this. domain; // set the access host
If (this. secure! = "") Str + = "; true"; // sets security.
Document. cookie = str;
}
This. getCookie = function (name ){
Var cookieArray = document. cookie. split (";"); // obtain the split cookie name value pair.
Var cookie = new Object ();
For (var I = 0; I <cookieArray. length; I ++ ){
Var arr = cookieArray [I]. split ("="); // separate names and values
If (arr [0] = name) return unescape (arr [1]); // if it is a 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 delete a cookie.
Document. cookie = str;
}
This. showCookie = function (){
Alert (unescape (document. cookie ));
}
}

Now, we can use this item to save the result after dragging. To save the result, it is certainly in the onmouseup event, because only the mouse is released to indicate that this drag is over, so Add the following code in the onmouseup event.Copy codeThe Code is as follows ://-------------------------
Var cook = new CookieClass ();
Cook. expires = 1; // valid for one minute
//---------------------------
Var DragContainer = ["col1", "col2", "col3"]; // id of the div used to implement the layout of the column
Var dragContainerLen = DragContainer. length;
// The above code should not be explained
// Release the mouse
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 writes col1 = col2_1 | col3_2 to cookies. The rest is to read the cookie when the page is refreshed or the page starts loading to display the last result of the drag layout. This code is of course in onloadCopy codeThe Code is as follows: var nl = 0;
Var dragNull = [];
Window. onload = function (){
TmpDiv = document. createElement ("div ");
TmpDiv.style.css Text = '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
}

Okay, that's all. If you don't understand what I'm talking about, check the Code. If you don't have any problems, please advise. (I feel like there are bugs. Sometimes it doesn't seem to work out. Wait for time to study again )!!