レイアウトをドラッグしてレイアウト ページを保存します。

function CookieClass( ){
this.expires = 0; //有効時間、分単位
this.path = "" //アクセスパスを設定します
this.domain = "";アクセスホスト
this.secure = false; // セキュリティを設定します
this.setCookie = function(name,value){
var str = name "="scape(value); this.expires>0){ //有効期限が設定されている場合
var date=new Date();
var ms=this.expires * 60 * 1000; // 1 分あたり 60 秒です。ミリ秒/秒
date.setTime(date.getTime() ms);
str =";期限切れ= 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;ivar 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 DragContainer=["col1","col2","col3"];//使用される列レイアウトを実装するには div の ID
varragContainerLen=DragContainer.length;
//上記のコードは説明の必要はありません
//マウスを放します
function MouseUp(){
if(ドラッグオブジェクト){
if(dragObject.parentNode.style.display=="none") ドラッグオブジェクト.parentNode.style.display="ブロック";
dragObject.parentNode.style.border="1px ソリッド #FFCC66"; ;
tmpDiv.style.display="none";
for(var m=0;mvarcolDiv=document.getElementById(DragContainer[m]); 🎜>var colDivLen =colDiv.getElementsByTagName("div").length
var colSty=colDiv.getAttribute("style");
if(colDivLen>&&colSty!=null){
colDiv.removeAttribute( "style") ;
break;
}
}
//これは追加されたコードです--------------------- ---- ---------------------
for(var ed=0;edvarragConId=DragContainer[ ed];
varragObj=document.getElementById(dragConId);
dragObj.removeAttribute("style");
varragDiv=dragObj.getElementsByTagName("div"); {
varragDivLen=dragDiv.length;
varragDivIdArr=[];
for(var dd=0;ddvarragDivId=dragDiv[dd].getAttribute( "id") ;
dragDivIdArr[dd]=dragDivId;
tmp=dragDivIdArr.join("|")
if(tmp=="") ; >}
cook.setCookie(dragConId,tmp);
}
//これは追加されたコードです--------------------- ---- ----------------------------
dragObject=null;
return false; 🎜>}



追加されたコードは、col1=col2_1|col3_2 のようなものを Cookie に書き込むことです。残りは、ページが更新されるか、ページの読み込みが開始されるときに Cookie を読み取り、ドラッグ レイアウトを表示する最終結果を実現します。このコードは、もちろん onload

コード コードは次のとおりです:

var nl=0;
varragNull=[];
window.onload=function() {
tmpDiv=document.createElement("div");
tmpDiv.style.cssText = 'position:absolute;display:none;border:1px dotted #FFCC66;'; (tmpDiv);
//これは追加されたコードです
(var init=0;initvar initDragId=DragContainer[init];
var initDragContainer=document。 getElementById(initDragId) ;
var initDragDiv=cook.getCookie(initDragId);
if(initDragDiv!=0){
var initDragArrLen= initDragArr.length;
for(var k=0;kvar chi=document.getElementById(initDragArr[k]);
initDragContainer.appendChild(chi); }
}
else{
dragNull[nl]=initDragId;
}
}
if(nl>0&&nlvar nullLen=ragNull.length;
for(var nn=0;nnvar nullId=dragNull[nn];
var nulldiv=document.getElementById(nullId); 🎜>nulldiv.style.height="20px";
}
}
//これは追加されたコードです
}


これで完了です。理解できません コードを見てください。どんな提案でも大歓迎です (バグがあるように感じます。時々動作しないこともあります。時間があるときに勉強します)。 ！