Ajax實(shí)現(xiàn)可拖曳的表格效果

2012/11/12 15:42:16作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱(chēng)】

【實(shí)例描述】

Ajax技術(shù)已經(jīng)被越多越多的人關(guān)注，其允許用戶(hù)自己定制界面。本例介紹如何利用Ajax實(shí)現(xiàn)可拖曳的表格，允許用戶(hù)通過(guò)拖曳表格定制自己的界面。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無(wú)標(biāo)題頁(yè)-學(xué)無(wú)憂(yōu)（www.yzddtk.cn）</title>
<style>
*{font-size:12px}
.dragTable{
 font-size:12px;
 border-top:1px solid #3366cc;
 margin-bottom: 10px;
 width:100%;
 background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
 cursor:move;
 color:#7787cc;
 background-color:#e5eef9;
 height:20px;
 padding-left:5px;
 font-weight:bold;
}
#parentTable{
 border-collapse:collapse;
 letter-spacing:25px;
}
</style>
<script defer>
var Drag={dragged:false,ao:null,tdiv:null,dragStart:function()
{  //創(chuàng)建新的DIV
 Drag.ao=event.srcElement;
 if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){
  Drag.ao=Drag.ao.offsetParent;
  Drag.ao.style.zIndex=100;
 }else
  return;
 Drag.dragged=true;
 Drag.tdiv=document.createElement("div");
 Drag.tdiv.innerHTML=Drag.ao.outerHTML;
 Drag.ao.style.border="1px dashed red";
 Drag.tdiv.style.display="block";
 Drag.tdiv.style.position="absolute";
 Drag.tdiv.style.filter="alpha(opacity=70)";
 Drag.tdiv.style.cursor="move";
 Drag.tdiv.style.border="1px solid #000000";
 Drag.tdiv.style.width=Drag.ao.offsetWidth;
 Drag.tdiv.style.height=Drag.ao.offsetHeight;
 Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;
 Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;
 document.body.appendChild(Drag.tdiv);
 Drag.lastX=event.clientX;
 Drag.lastY=event.clientY;
 Drag.lastLeft=Drag.tdiv.style.left;
 Drag.lastTop=Drag.tdiv.style.top;
},
draging:function(){   //判斷鼠標(biāo)的位置
if(!Drag.dragged||Drag.ao==null)return;
var tX=event.clientX;
var tY=event.clientY;
Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;
Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;
for(var i=0;i<parentTable.cells.length;i++){
var parentCell=Drag.getInfo(parentTable.cells[i]);
if(tX>=parentCell.left&&tX<=parentCell.right&&t
Y>=parentCell.top&&tY<=parentCell.bottom){
var subTables=parentTable.cells[i].getElementsByTagName("table");
if(subTables.length==0){
if(tX>=parentCell.left&&tX<=parentCell.right&&t
Y>=parentCell.top&&tY<=parentCell.bottom){
     parentTable.cells[i].appendChild(Drag.ao);
    }
    break;
   }
   for(var j=0;j<subTables.length;j++){
    var subTable=Drag.getInfo(subTables[j]);
    if(tX>=subTable.left&&tX<=subTable.right&&t
Y>=subTable.top&&tY<=subTable.bottom){
     parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
     break;
    }else{
     parentTable.cells[i].appendChild(Drag.ao);
    } 
   }
  }
 }
},
 dragEnd:function(){  //拖拽完畢
 if(!Drag.dragged)return;
 Drag.dragged=false;
 Drag.mm=Drag.repos(150,15);
 Drag.ao.style.borderWidth="0px";
 Drag.ao.style.borderTop="1px solid #3366cc";
 Drag.tdiv.style.borderWidth="0px";
 Drag.ao.style.zIndex=1;
},
getInfo:function(o){     //取得坐標(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;
},
repos:function(aa,ab){
 var f=Drag.tdiv.filters.alpha.opacity;
 var tl=parseInt(Drag.getInfo(Drag.tdiv).left);
 var tt=parseInt(Drag.getInfo(Drag.tdiv).top);
 var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;
 var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;
 var kf=f/ab;
 return setInterval(function(){if(ab<1){
       clearInterval(Drag.mm);
       Drag.tdiv.removeNode(true);
       Drag.ao=null;
       return;
      }
     ab--;
     tl-=kl;
     tt-=kt;
     f-=kf;
     Drag.tdiv.style.left=parseInt(tl)+"px";
     Drag.tdiv.style.top=parseInt(tt)+"px";
     Drag.tdiv.filters.alpha.opacity=f;
    },aa/ab)
},
 inint:function(){   //初始化表格
 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")break;
   subTables[j].rows[0].className="dragTR";
   subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
  }
 }
 document.onmousemove=Drag.draging;
 document.onmouseup=Drag.dragEnd;
}
}
Drag.inint();
</script>
拖曳標(biāo)題欄需要專(zhuān)門(mén)的樣式。本例主要用到的樣式表如下所示：
</head>
<body>
   <table border="0" cellpadding="0" cellspacing="10" 
width="100%" height=480 id="parentTable">
<tr >
 <td width="25%" valgin="top">
  <table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td><b>天氣預(yù)報(bào)</b></td>
   </tr>
   <tr>
    <td>本地近3天持續(xù)降溫，請(qǐng)注意防寒</td>
   <tr>
  </table><table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td>我的日記</td>
   </tr>
   <tr>
    <td>今天天氣非常美好<br/> 逛街購(gòu)物+shopping,滿(mǎn)北京城的拋。
忙得找不到北。坐功其到地鐵</td>
   <tr>
  </table>
  <table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td>新聞</td>
   </tr>
   <tr>
    <td>對(duì)許多國(guó)人來(lái)說(shuō)，五一是又一個(gè)消費(fèi)和休息的好時(shí)光，
而對(duì)某些人來(lái)說(shuō)它并不意味著假期……這七天，一些人迎來(lái)了
人生中的巨大成就，一些人仍在一線(xiàn)辛勤勞作，一些人遭遇天災(zāi)人
禍不幸遇難，也有一些人因?yàn)檎葎e人而失去了珍貴的生命……人
們復(fù)雜的命運(yùn)故事并不因?yàn)榧倨诙袛啵纯催@七天你離開(kāi)的時(shí)候，
那些大人物或者小人物身上又發(fā)生了什么樣的新故事</td>
   <tr>
  </table>
 </td>
 <td width="25%">
  <table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td>體育</td>
   </tr>
   <tr>
    <td>安全意識(shí)游客在出行前應(yīng)事先了解當(dāng)?shù)乇尘百Y料，挑選合適的
時(shí)間、地點(diǎn)，做好身體、精神、物資和全面救助的準(zhǔn)備。</td>
   <tr>
  </table></td>
 <td width="25%">
  <table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td>娛樂(lè)</td>
   </tr>
   <tr>
    <td>制定預(yù)案設(shè)計(jì)線(xiàn)路盡量靠近公路，保證救援人員能夠及時(shí)到達(dá)。
盡量選擇村莊和登山大本營(yíng)等作為宿營(yíng)地，盡量不安排露營(yíng)。
發(fā)生任何身體不適應(yīng)立即休息。</td>
   <tr>
  </table>  <table border=0 class="dragTable" cellspacing="0">
   <tr>
    <td>八卦</td>
   </tr>
   <tr>
    <td>5月1日下午武漢中山公園“峽谷漂流”中兩艘漂流筏相撞導(dǎo)致翻船，
造成2人重傷，4人輕傷。</td>
   <tr>
  </table>
 </td>
</tr>
</table>
</body>
</html>

【運(yùn)行效果】

表格的運(yùn)行效果

Ajax效果——可拖曳的表格運(yùn)行效果

表格拖曳效果

Ajax效果——可拖曳的表格運(yùn)行效果

【難點(diǎn)剖析】

本例中script元素后面不再是“l(fā)anguage=’javascript’”的屙陛，而使用了“defer”?！癲efer”表示在頁(yè)面加載完畢后再運(yùn)行．JavaScript．代碼，這樣可以防止出現(xiàn)找不到對(duì)象的問(wèn)題?！癲efer”還可以使腳本在后臺(tái)被下載，前臺(tái)的內(nèi)容則正常顯示給用戶(hù)。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：Ajax實(shí)現(xiàn)可拖曳的表格效果進(jìn)行本實(shí)例源碼下載

標(biāo)簽： Ajax 表格