支持COOKIE保存的層拖動實例_層和布局特效

這個代碼非常好，既然簡單又實用，很多層拖動窗口都不支持用COOKIE保存拖動位置，下次打開后各個模塊層全部都復位了，給用戶造成很多麻煩，這款代碼好就好在它可以將拖動數據保存在COOKIE中，只要不清空COOKIE，用戶的拖動操作將會被保留，下次打開后會顯示上次的拖動位置。這更加人性一點。

<html>
<head>
<title>拖拽+COOKIE保存_Demo:/</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<style>
* {
	font-size:12px
}
/*樣式class http://v.2sort.cn*/
.dragTable {
	font-size:12px;
	border-top:1px solid #3366cc;
	margin-bottom: 10px;
	width:100%;
	background-color:#FFFFFF;
}
.dragTR {
	cursor:move;/*控制當鼠標移動到該行上時顯示的樣式*/
	color:#7787cc;
	background-color:#e5eef9;
	font-size:16px;
	font-family:"宋體";
	font-weight:bold;
	letter-spacing:1px;
}
/*利用tagName定義樣式*/
td {
	vertical-align:top;
}
/*#表示對id=parentTable元素的樣式定義*/
#parentTable {
	border-collapse:collapse;
	letter-spacing:25px;
}
</style>
<script language ="JavaScript" type="text/javascript">
//----設置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;
}

//----設置Cookie 結束------

//---讀取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 結束-------

//檢測是否禁用了cookie
function 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><a href="/" target="_blank">mb5u.com</a></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><a href="/" target="_blank">mb5u.com</a></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><a href="/" target="_blank">mb5u.com</a></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><a href="/" target="_blank">mb5u.com</a></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>
<!--
/*
實現拖拽的代碼
*/ 
var draged=false;
tdiv=null;
function dragStart(){
ao=event.srcElement; //設置或獲取觸發事件的對象,這里是可以移動的table對象的TD對象
if((ao.tagName=="TD")||(ao.tagName=="TR"))
ao=ao.offsetParent;//獲取定義對象offsetTop和offsetLeft屬性的容器對象的引用,這里是獲取的被移動的table對象。
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;//被移動table對象的高度
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++){//for1
var parentCell=getInfo(parentTable.cells[i]);
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom)//判斷鼠標的位置是否移動到父表的某個列中
{//if1
var subTables=parentTable.cells[i].getElementsByTagName("table");
if(subTables.length==0)//如果鼠標所在的列中沒有沒有子表，直接增加子對象（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++){//for1
var 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; //這里僅僅對className==dragTable的表處理，排除組織頁面中使用的table
pttyle+=subTables[j].id+","+subTables[j].rows[0].cells[0].innerText+":";
}
pttyle+="|";
}
}//for1
setCookie("pttyle",pttyle,"");
//---save sub table position end---
mm=ff(150,15);//
}
function getInfo(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){//用于恢復位置，aa/ab其值越大恢復的速度越快
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(){//初始化
/*根據cookie組織父表*/
var pttyle=getcookie("pttyle");

if (pttyle.length>0){
//*****獲得父表中所有的子表對象***/
var ctCount=0; //計數器
var stObjects=new Array();//保存子表對象

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]); //刪除列中的子表對象 
}
}

//讀取cookie中子表對象id 
var tempCells=pttyle.split("|");//因為格式為pttyle=stid,stt:stid,stt:|stid,stt:stid,stt:|

//begin for2
for(var i=0; i<tempCells.length-1;i++)//拆成數組時存在一個多余的元素，故循環減去1 
{
var tempSTs=tempCells[i].split(":"); 
for (var j=0;j<tempSTs.length-1;j++)//遍歷子表信息,
{ 
for(var n=0;n<stObjects.length;n++)//從子表對象數組中查詢子表對象
{
if(tempSTs[j].indexOf(stObjects[n].id)!=-1)//id值存在
{
parentTable.cells[i].appendChild(stObjects[n]);break;
} 
}
}
}//end for2 
}//pttyle.length>0 End

/*根據cookie組織父表結束*/

/*設置拖拽的樣式和事件*/
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";//給行添加表示可以移動的樣式
subTables[j].rows[0].attachEvent("onmousedown",dragStart);//將指定函數綁定到事件，以便每當該事件在對象上觸發時都調用該函數
subTables[j].attachEvent("ondrag",draging);//將draging函數邦定到進行拖曳操作時，在源對象上持續觸發的事件。
subTables[j].attachEvent("ondragend",dragEnd);//ondragend事件：當用戶在拖曳操作結束后釋放鼠標時在源對象上觸發。
}
} 
/*設置拖拽的樣式和事件結束*/
}
inint();
</script>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-12-16

[收藏][報錯][返回列表]

相關層和布局特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

支持COOKIE保存的層拖動實例_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些