拖动布局之保存布局页面,拖动布局之保存布局

我实现的方法是记录每列拥有的拖动对象,这样在初始或刷新的时候读取这列有哪些拖动对象,直接把拖动对象通过appenChild加进去就可以了,比如拖动后列的id为col2,在这一列的拖动对象的id为col1_2,col3_1,col2_1,我就把col2=col1_2|col3_1|col2_1记录下来,在刷新页面的时候就读取col2的值,循环通过document.getElementById(col2).appendChild(document.getElementById(col1_2))实现显示布局的结果。呵呵!也不知我说的明不明白,不过看后面的代码应该就会清楚了。好了废话少说,看实现的代码吧!!
首先要保存拖动后的记录,一个是通过数据库,一个是cookie,我这用的是cookie。下面是一个cookie的类

拖动后怎么把布局结果保存呢??我开始考虑是记录每个拖动对象的的坐标,可做起来我感觉好麻烦,所以就没有采用这种方法,我实现的方法是记录每列拥有的拖动对象,这样在初始或刷新的时候读取这列有哪些拖动对象,直接把拖动对象通过appenChild加进去就可以了,比如拖动后列的id为col2,在这一列的拖动对象的id为col1_2,col3_1,col2_1,我就把col2=col1_2|col3_1|col2_1记录下来,在刷新页面的时候就读取col2的值,循环通过document.getElementById(col2).appendChild(document.getElementById(col1_2))实现显示布局的结果。呵呵!也不知我说的明不明白,不过看后面的代码应该就会清楚了。好了废话少说,看实现的代码吧!!

复制代码 代码如下:

首先要保存拖动后的记录,一个是通过数据库,一个是cookie,我这用的是cookie。下面是一个cookie的类

function CookieClass(){
this.expires = 0 ; //有效时间,以分钟为单位
this.path = ""; //设置访问路径
this.domain = ""; //设置访问主机
this.secure = false; //设置安全性
this.setCookie = function(name,value){
var str = name+"="+escape(value);
if (this.expires>0){ //如果设置了过期时间
var date=new Date();
var ms=this.expires * 60 * 1000; //每分钟有60秒,每秒1000毫秒
date.setTime(date.getTime()+ms);
str+="; expires="+date.toGMTString();
}
if(this.path!="")str+="; path="+this.path; //设置访问路径
if(this.domain!="")str+="; domain="+this.domain; //设置访问主机
if(this.secure!="")str+="; true"; //设置安全性
document.cookie=str;
}
this.getCookie=function(name){
var cookieArray=document.cookie.split("; "); //得到分割的cookie名值对
var cookie=new Object();
for(var i=0;i<cookieArray.length;i++){
var arr=cookieArray[i].split("="); //将名和值分开
if(arr[0]==name)return unescape(arr[1]); //如果是指定的cookie,则返回它的值
}
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(); //将过期时间设置为过去来删除一个cookie
document.cookie=str;
}
this.showCookie=function(){
alert(unescape(document.cookie));
}
}

 程序代码

好了,现在就用这个东西保存拖动后的结果。 要保存结果当然是在onmouseup事件,因为只有鼠标松开才说明这一次拖动结束了,所以在onmouseup事件中增加以下的代码。

function CookieClass(){

复制代码 代码如下:

    this.expires = 0 ; //有效时间,以分钟为单位

//-------------------------
var cook = new CookieClass();
cook.expires =1;//一分钟有效
//---------------------------
var DragContainer=["col1","col2","col3"];//用来实现布局的列的div的id
var dragContainerLen=DragContainer.length;
//以上的代码应该不用解释
//鼠标松开
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;
}
}
//这是增加的代码-----------------------------------------------
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);
}
//这是增加的代码------------------------------------------------------
dragObject=null;
return false;
}
}

    this.path = ""; //设置访问路径

增加的代码就是把col1=col2_1|col3_2这类的东西写入到cookie。剩下的就是在页面刷新或页面开始加载的时候读取cookie,实现显示拖动布局的最后结果,这段代码当然是在onload中

    this.domain = ""; //设置访问主机

复制代码 代码如下:

    this.secure = false; //设置安全性

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);
//这是增加的代码
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";
}
}
//这是增加的代码
}

    

好了,就这么多,看不明白我说的就看代码吧,不足的地方欢迎指教(感觉有bug,有时好像不行,等有时间再研究下)!!

    this.setCookie = function(name,value){

您可能感兴趣的文章:

  • 用javascript做拖动布局的思路
  • 用javascript做拖动布局的思路
  • php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
  • 基于jquery的拖动布局插件

        var str = name+"="+escape(value);

        if (this.expires>0){ //如果设置了过期时间

        var date=new Date();

        var ms=this.expires * 60 * 1000; //每分钟有60秒,每秒1000毫秒

        date.setTime(date.getTime()+ms);

        str+="; expires="+date.toGMTString();

    }

    if(this.path!="")str+="; path="+this.path; //设置访问路径

    if(this.domain!="")str+="; domain="+this.domain; //设置访问主机

    if(this.secure!="")str+="; true"; //设置安全性

    

    document.cookie=str;

}

this.getCookie=function(name){

    var cookieArray=document.cookie.split("; "); //得到分割的cookie名值对

    var cookie=new Object();

    for(var i=0;i<cookieArray.length;i++){

        var arr=cookieArray[i].split("="); //将名和值分开

        if(arr[0]==name)return unescape(arr[1]); //如果是指定的cookie,则返回它的值

    }

    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(); //将过期时间设置为过去来删除一个cookie

    document.cookie=str;

}

this.showCookie=function(){

    alert(unescape(document.cookie));

}

}

好了,现在就用这个东西保存拖动后的结果。 要保存结果当然是在onmouseup事件,因为只有鼠标松开才说明这一次拖动结束了,所以在onmouseup事件中增加以下的代码。

 程序代码

//-------------------------

var cook = new CookieClass();

cook.expires =1;//一分钟有效

//---------------------------

var DragContainer=["col1","col2","col3"];//用来实现布局的列的div的id

var dragContainerLen=DragContainer.length;

//以上的代码应该不用解释

//鼠标松开

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;

            }

        }

//这是增加的代码-----------------------------------------------

        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);

        }

//这是增加的代码------------------------------------------------------

        dragObject=null;

        return false;

    }

}

增加的代码就是把col1=col2_1|col3_2这类的东西写入到cookie。剩下的就是在页面刷新或页面开始加载的时候读取cookie,实现显示拖动布局的最后结果,这段代码当然是在onload中

 程序代码

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);

//这是增加的代码    

        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";

        }

    }

//这是增加的代码

}

好了,就这么多,看不明白我说的就看代码吧,不足的地方欢迎指教(感觉有bug,有时好像不行,等有时间再研究下)!!

本文由华夏彩票发布于关于计算机,转载请注明出处:拖动布局之保存布局页面,拖动布局之保存布局

您可能还会对下面的文章感兴趣: