支持COOKIE保存的層拖動(dòng)實(shí)例

2024-09-05 12:21:44

字體：大中小

供稿：網(wǎng)友

這個(gè)代碼非常好，既然簡(jiǎn)單又實(shí)用，很多層拖動(dòng)窗口都不支持用COOKIE保存拖動(dòng)位置，下次打開(kāi)后各個(gè)模塊層全部都復(fù)位了，給用戶造成很多麻煩，這款代碼好就好在它可以將拖動(dòng)數(shù)據(jù)保存在COOKIE中，只要不清空COOKIE，用戶的拖動(dòng)操作將會(huì)被保留，下次打開(kāi)后會(huì)顯示上次的拖動(dòng)位置。這更加人性一點(diǎn)。

<html><head><title>拖拽+COOKIE保存</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>* {	font-size:12px}.dragTable {	font-size:12px;	border-top:1px solid #3366cc;	margin-bottom: 10px;	width:100%;	background-color:#FFFFFF;}.dragTR {	cursor:move;/*控制當(dāng)鼠標(biāo)移動(dòng)到該行上時(shí)顯示的樣式*/	color:#7787cc;	background-color:#e5eef9;	font-size:16px;	font-family:"宋體";	font-weight:bold;	letter-spacing:1px;}/*利用tagName定義樣式*/td {	vertical-align:top;}/*#表示對(duì)id=parentTable元素的樣式定義*/#parentTable {	border-collapse:collapse;	letter-spacing:25px;}</style><script language ="JavaScript" type="text/javascript">//----設(shè)置Cookie------function setCookie(name,value,domain){var value = escape(value);var nameString = "Drag_"+name + "=" + value; //給cookie變量增加前綴var extime = new Date(); extime.setTime (extime.getTime () + 315360000);var expiryString = ";expires=" + extime.toGMTString();var domainString = "";var pathString = ";path=/"; var setvalue = nameString + expiryString;document.cookie = setvalue;}//----設(shè)置Cookie 結(jié)束------//---讀取Cookie-------function getcookie (name) {var CookieFound = false;var start = 0;var end = 0;var CookieString = document.cookie;var i = 0;name="Drag_"+name; //增加前綴while (i <= CookieString.length) {start = i ;end = start + name.length;if (CookieString.substring(start, end) == name){CookieFound = true;break; }i++;}if (CookieFound){start = end + 1;end = CookieString.indexOf(";",start);if (end < start)end = CookieString.length;var getvalue = CookieString.substring(start, end);return unescape(getvalue);}return "";}//---讀取Cookie 結(jié)束-------//檢測(cè)是否禁用了cookiefunction isEnableCookie() { try {var cookie_helper = new CookieHelper("");var test_cookie_name = "test_cookie_name";var test_cookie_value = "test_cookie_value";var test_cookie_value_ret = "";cookie_helper.writeCookie(test_cookie_name,test_cookie_value);test_cookie_value_ret = cookie_helper.getCookieValue(test_cookie_name); if ( test_cookie_value_ret != null ) {cookie_helper.removeCookie(test_cookie_name);return true;} else { return false;} } catch (error) { return false;}}</script></head><body><table border="0" cellpadding="0" cellspacing="10" width="798" height="500" id="parentTable">  <tr >    <td width="266" valign="top"><table id ="st1" border="1" class="dragTable" cellspacing="0">        <tr>          <td>HomePage</td>        </tr>        <tr>          <td id="div1"></td>        </tr>      </table>      <table style="display:none" class="dragTable">        <tr>          <td></td>        </tr>      </table>      <table id="st2" border="1" class="dragTable" cellspacing="0">        <tr>          <td>Service</td>        </tr>        <tr>          <td id="div2"></td>        </tr>      </table></td>    <td width="266"><table id="st3" border="1" class="dragTable" cellspacing="0">        <tr>          <td>div3</td>        </tr>        <tr>          <td id="div3"></td>        </tr>      </table>      <table style="display:none" class="dragTable">        <tr>          <td></td>        </tr>      </table>      <table id="st4" border="1" class="dragTable" cellspacing="0">        <tr>          <td>div4</td>        </tr>        <tr>          <td id="div4" ></td>        </tr>      </table></td>    <td width="266"><table id="st5" border="1" class="dragTable" cellspacing="0">        <tr>          <td>Produce</td>        </tr>        <tr>          <td id="div5"></td>        </tr>      </table>      <table style="display:none" class="dragTable">        <tr>          <td></td>        </tr>      </table>      <table id="st6" border="1" class="dragTable" cellspacing="0">        <tr>          <td>About</td>        </tr>        <tr align="center">          <td id="div6"><table cellspacing="0" cellpadding="0" border="0" >              <tr>                <td align="center"></td>              </tr>            </table></td>        </tr>      </table>      <table style="display:none" class="dragTable" ID="Table1">        <tr>          <td></td>        </tr>      </table>      <table id="st7" border=1 class="dragTable" cellspacing="0">        <tr>          <td>div7</td>        </tr>        <tr>          <td id="div7"><table cellSpacing=0 cellPadding=0 width=260 border=0 ID="Table2">              <tr>                <td align="center"></td>              </tr>            </table></td>        </tr>      </table></td>  </tr></table><script language="javascript" defer><!--/*實(shí)現(xiàn)拖拽的代碼*/ var draged=false;tdiv=null;function dragStart(){ao=event.srcElement; //設(shè)置或獲取觸發(fā)事件的對(duì)象,這里是可以移動(dòng)的table對(duì)象的TD對(duì)象if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;//獲取定義對(duì)象offsetTop和offsetLeft屬性的容器對(duì)象的引用,這里是獲取的被移動(dòng)的table對(duì)象。else return;draged=true;tdiv=document.createElement("div");tdiv.innerHTML=ao.outerHTML;tdiv.style.display="block";tdiv.style.position="absolute";tdiv.style.filter="alpha(opacity=70)";tdiv.style.cursor="move";tdiv.style.width=ao.offsetWidth;//被移動(dòng)table對(duì)象的高度tdiv.style.height=ao.offsetHeight;tdiv.style.top=getInfo(ao).top;tdiv.style.left=getInfo(ao).left;document.body.appendChild(tdiv);lastX=event.clientX;lastY=event.clientY;lastLeft=tdiv.style.left;lastTop=tdiv.style.top;try{ao.dragDrop(); //初始化拖曳事件}catch(e){}}function draging(){//重要:判斷MOUSE的位置if(!draged)return;var tX=event.clientX;var tY=event.clientY;tdiv.style.left=parseInt(lastLeft)+tX-lastX;//tdiv.style.top=parseInt(lastTop)+tY-lastY;for(var i=0;i<parentTable.cells.length;i++){//for1var parentCell=getInfo(parentTable.cells[i]);if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom)//判斷鼠標(biāo)的位置是否移動(dòng)到父表的某個(gè)列中{//if1var subTables=parentTable.cells[i].getElementsByTagName("table");if(subTables.length==0)//如果鼠標(biāo)所在的列中沒(méi)有沒(méi)有子表，直接增加子對(duì)象（table）{if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){parentTable.cells[i].appendChild(ao);}break;}for(var j=0;j<subTables.length;j++)//列中存在子表的處理{var subTable=getInfo(subTables[j]);if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){parentTable.cells[i].insertBefore(ao,subTables[j]);break;}else{parentTable.cells[i].appendChild(ao);} }}//if1}//for1}function dragEnd(){if(!draged)return;draged=false;//---save sub table position---var pttyle="";for(var i=0;i<parentTable.cells.length;i++){//for1var subTables=parentTable.cells[i].getElementsByTagName("table");if(subTables.length==0){pttyle+="|";break;}else{for(var j=0;j<subTables.length;j++)//列中存在子表的處理{if(subTables[j].className!="dragTable") continue; //這里僅僅對(duì)className==dragTable的表處理，排除組織頁(yè)面中使用的tablepttyle+=subTables[j].id+","+subTables[j].rows[0].cells[0].innerText+":";}pttyle+="|";}}//for1setCookie("pttyle",pttyle,"");//---save sub table position end---mm=ff(150,15);//}function getInfo(o){//取得對(duì)象的絕對(duì)坐標(biāo)var to=new Object();to.left=to.right=to.top=to.bottom=0;var twidth=o.offsetWidth;var theight=o.offsetHeight;while(o!=document.body){to.left+=o.offsetLeft;to.top+=o.offsetTop;o=o.offsetParent;}to.right=to.left+twidth;to.bottom=to.top+theight;return to;}function ff(aa,ab){//用于恢復(fù)位置，aa/ab其值越大恢復(fù)的速度越快var ac=parseInt(getInfo(tdiv).left);var ad=parseInt(getInfo(tdiv).top);var ae=(ac-getInfo(ao).left)/ab;var af=(ad-getInfo(ao).top)/ab;return setInterval(function(){if(ab<1){clearInterval(mm);tdiv.removeNode(true);ao=null;return}ab--;ac-=ae;ad-=af;tdiv.style.left=parseInt(ac)+"px";tdiv.style.top=parseInt(ad)+"px"},aa/ab)}function inint(){//初始化/*根據(jù)cookie組織父表*/var pttyle=getcookie("pttyle");if (pttyle.length>0){//*****獲得父表中所有的子表對(duì)象***/var ctCount=0; //計(jì)數(shù)器var stObjects=new Array();//保存子表對(duì)象for(var i=0;i<parentTable.cells.length;i++){var subTables=parentTable.cells[i].getElementsByTagName("table");//獲得子表 for(var j=0;j<subTables.length;j++){ stObjects[ctCount]=subTables[j];ctCount++; parentTable.cells[i].removeChild(subTables[j]); //刪除列中的子表對(duì)象 }}//讀取cookie中子表對(duì)象id var tempCells=pttyle.split("|");//因?yàn)楦袷綖閜ttyle=stid,stt:stid,stt:|stid,stt:stid,stt:|//begin for2for(var i=0; i<tempCells.length-1;i++)//拆成數(shù)組時(shí)存在一個(gè)多余的元素，故循環(huán)減去1 {var tempSTs=tempCells[i].split(":"); for (var j=0;j<tempSTs.length-1;j++)//遍歷子表信息,{ for(var n=0;n<stObjects.length;n++)//從子表對(duì)象數(shù)組中查詢子表對(duì)象{if(tempSTs[j].indexOf(stObjects[n].id)!=-1)//id值存在{parentTable.cells[i].appendChild(stObjects[n]);break;} }}}//end for2 }//pttyle.length>0 End/*根據(jù)cookie組織父表結(jié)束*//*設(shè)置拖拽的樣式和事件*/for(var i=0;i<parentTable.cells.length;i++){var subTables=parentTable.cells[i].getElementsByTagName("table");//獲得子表for(var j=0;j<subTables.length;j++){if(subTables[j].className!="dragTable") continue;subTables[j].rows[0].className="dragTR";//給行添加表示可以移動(dòng)的樣式subTables[j].rows[0].attachEvent("onmousedown",dragStart);//將指定函數(shù)綁定到事件，以便每當(dāng)該事件在對(duì)象上觸發(fā)時(shí)都調(diào)用該函數(shù)subTables[j].attachEvent("ondrag",draging);//將draging函數(shù)邦定到進(jìn)行拖曳操作時(shí)，在源對(duì)象上持續(xù)觸發(fā)的事件。subTables[j].attachEvent("ondragend",dragEnd);//ondragend事件：當(dāng)用戶在拖曳操作結(jié)束后釋放鼠標(biāo)時(shí)在源對(duì)象上觸發(fā)。}} /*設(shè)置拖拽的樣式和事件結(jié)束*/}inint();</script></body></html>

上一篇：CSS中1px虛線邊框的方法

下一篇：CSS+JS表格行選中變色并儲(chǔ)存的效果代碼