레이아웃 드래그 및 레이아웃 페이지 저장cookie

레이아웃 드래그 및 레이아웃 페이지 저장cookie_javascript 기술

WBOY

풀어 주다： 2016-05-16 18:17:27

원래의

1011명이 탐색했습니다.

구현하는 방법은 각 열이 소유한 드래그 개체를 기록하여 초기화하거나 새로 고칠 때 이 열에 어떤 드래그 개체가 있는지 읽을 수 있도록 하고, 뒤쪽 열을 드래그하는 등 AppendChild를 통해 직접 드래그 개체를 추가하면 됩니다. id는 col2이고 이 열에 드래그된 개체의 ID는 col1_2, col3_1, col2_1입니다. 페이지를 새로 고칠 때 col2 값을 읽고 document.getElementById를 반복합니다. .(col2).appendChild(document.getElementById(col1_2))는 디스플레이 레이아웃의 결과를 구현합니다. 헤헤! 제가 말한 내용이 명확한지 아닌지는 모르겠지만, 아래 코드를 보면 명확할 것입니다. 자, 말도 안되는 소리는 그만하고 구현된 코드를 살펴보겠습니다! !
먼저 드래그한 기록을 저장해야 하는데, 하나는 데이터베이스를 통해, 다른 하나는 쿠키를 통해 저장합니다. 다음은 쿠키 클래스입니다

코드 복사 코드는 다음과 같습니다.

 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 //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("; "); //분할 쿠키 이름-값 쌍 가져오기 
var cookie=new Object() 
for(var i=0;ivar arr=cookieArray[i].split("="); //이름과 값을 분리합니다
if(arr[0]==name)return unescape(arr[1]); //쿠키를 지정한 경우 해당 값을 반환합니다. 
} 
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(); 과거 쿠키 삭제 
document.cookie=str; 
} 
this.showCookie=function(){ 
alert(unescape(document.cookie)) 
} 
} 


 

자, 이제 이것을 사용하여 드래그 결과를 저장하세요. 물론 결과를 onmouseup 이벤트에 저장하려면 마우스를 놓았을 때만 드래그가 끝났음을 의미하므로 onmouseup 이벤트에 다음 코드를 추가합니다.

코드 복사 코드는 다음과 같습니다.

//------- -- ---------------
var cook = new CookieClass()
cook.expires =1;//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;mvar 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;edvar dragConId=DragContainer[ ed]
var dragObj=document.getElementById(dragConId);
dragObj.removeAttribute("style")
var dragDiv=dragObj.getElementsByTagName("div"); {
var dragDivLen=dragDiv.length;
var dragDivIdArr=[];
for(var dd=0;ddvar dragDivId=dragDiv[dd].getAttribute( "id") ;
dragDivIdArr[dd]=dragDivId;
tmp=dragDivIdArr.join("|");
if(tmp=="") tmp=0; >}
cook.setCookie(dragConId,tmp)
}
//추가된 코드입니다--------- ---- ---------------
dragObject=null
false 반환
}
}

추가된 코드는 쿠키에 col1=col2_1|col3_2와 같은 내용을 쓰는 것입니다. 나머지는 페이지가 새로 고쳐지거나 페이지가 로드되기 시작할 때 쿠키를 읽어 드래그 레이아웃을 표시하는 최종 결과를 구현하는 것입니다. 이 코드는 물론 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;initvar initDragId=DragContainer[init]; var initDragContainer=document. getElementById(initDragId) ; 
var initDragDiv=cook.getCookie(initDragId); 
if(initDragDiv!=0){ 
var initDragArr=initDragDiv.split("|"); initDragArr.length 
for(var k=0;kvar 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;nnvar nullId=dragNull[nn] 
var nulldiv=document.getElementById(nullId); 🎜>nulldiv.style.height="20px"; 
} 
} 
//추가된 코드입니다
} 

 
그렇습니다. 이해가 안가네요 그냥 코드를 보세요. 어떤 제안이라도 환영합니다. (버그가 있는 것 같고 때로는 작동하지 않는 경우도 있습니다. 시간이 나면 공부하겠습니다.) !