實例名稱

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

實例描述

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

實例代碼

html xmlns="" headu00a0u00a0u00a0 title無標(biāo)題頁-學(xué)無憂*font-size:u00a0font-size:12px;u00a0border-top:1px solid #3366cc;u00a0margin-bottom: 10px;u00a0width:100%;u00a0background-color:#FFFFFF;tdvertical-align:top;.dragTRu00a0cursor:move;u00a0color:#7787cc;u00a0background-color:#e5eef9;u00a0height:20px;u00a0padding-left:5px;u00a0font-weight:bold;#parentTableu00a0border-collapse:collapse;u00a0letter-spacing:25px;/stylescript defervar Drag=dragged:false，ao:null，tdiv:null，dragStart:functionu00a0 //創(chuàng)建新的DIVu00a0=;u00a0=="TD"||=="TR"u00a0u00a0=;u00a0u00a0=100;u00a0elseu00a0u00a0return;u00a0=true;u00a0="div";u00a0=;u00a0="1px dashed red";u00a0="block";u00a0="absolute";u00a0="alphaopacity=70";u00a0="move";u00a0="1px solid #";u00a0=;u00a0=;u00a0=;u00a0=;u00a0;u00a0=;u00a0=;u00a0=;u00a0=;，

draging:functionu00a0u00a0 //判斷鼠標(biāo)的位置

if!||==nullreturn;

var tX=;

var tY=;

forvar i=0;;i++var parentCell=;

iftX==== subTables="table";==0iftX====u00a0u00a0u00a0u00a0u00a0;u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0break;u00a0u00a0u00a0u00a0u00a0u00a0forvar j=0;;j++u00a0u00a0u00a0u00a0var subTable=;u00a0u00a0u00a0u00a0iftX====u00a0u00a0u00a0u00a0u00a0，subTablesj;u00a0u00a0u00a0u00a0u00a0break;u00a0u00a0u00a0u00a0elseu00a0u00a0u00a0u00a0u00a0;u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0，u00a0dragEnd:functionu00a0 //拖拽完畢u00a0if!;u00a0=false;u00a0=，15;u00a0="0px";u00a0="1px solid #3366cc";u00a0="0px";u00a0=1;，getInfo:functionou00a0u00a0u00a0u00a0 //取得坐標(biāo)u00a0var to=new Object;u00a0====0;u00a0var twidth=o.offsetWidth;u00a0var theight=o.offsetHeight;u00a0whileo!=u00a0u00a0+=o.offsetLeft;u00a0u00a0+=o.offsetTop;u00a0u00a0o=o.offsetParent;u00a0u00a0u00a0=+twidth;u00a0u00a0=+theight;u00a0return to;，repos:functionaa，abu00a0var f=;u00a0var tl=;u00a0var tt=;u00a0var kl=;u00a0var kt=;u00a0var kf=f/ab;u00a0return setIntervalfunctionifab1u00a0u00a0u00a0u00a0u00a0u00a0u00a0;u00a0u00a0u00a0u00a0u00a0u00a0u00a0;u00a0u00a0u00a0u00a0u00a0u00a0u00a0=null;u00a0u00a0u00a0u00a0u00a0u00a0u00a0return;u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0u00a0ab--;u00a0u00a0u00a0u00a0u00a0tl-=kl;u00a0u00a0u00a0u00a0u00a0tt-=kt;u00a0u00a0u00a0u00a0u00a0f-=kf;u00a0u00a0u00a0u00a0u00a0=parseInttl+"px";u00a0u00a0u00a0u00a0u00a0=parseInttt+"px";u00a0u00a0u00a0u00a0u00a0=f;u00a0u00a0u00a0u00a0，aa/ab，u00a0inint:functionu00a0u00a0 //初始化表格u00a0forvar i=0;;i++u00a0u00a0var subTables="table";u00a0u00a0forvar j=0;;j++u00a0u00a0u00a0!="dragTable"break;u00a0u00a0u00a0="dragTR";u00a0u00a0u00a0"onmousedown"，;u00a0u00a0u00a0u00a0=;u00a0=;;/script

拖曳標(biāo)題欄需要專門的樣式。本例主要用到的樣式表如下所示：/headbodyu00a0u00a0 table border="0" cellpadding="0" cellspacing="10" width="100%" height=480 id="parentTable"tr u00a0td width="25%" valgin="top"u00a0u00a0table border=0 class="dragTable" cellspacing="0"u00a0u00a0u00a0tru00a0u00a0u00a0u00a0tdb天氣預(yù)報/b/tdu00a0u00a0u00a0/tru00a0u00a0u00a0tru00a0u00a0u00a0u00a0td本地近3天持續(xù)降溫，請注意防寒/tdu00a0u00a0u00a0tru00a0u00a0/tabletable border=0 class="dragTable" cellspacing="0"u00a0u00a0u00a0tru00a0u00a0u00a0u00a0td我的日記/tdu00a0u00a0u00a0/tru00a0u00a0u00a0tru00a0u00a0u00a0u00a0td今天天氣非常美好br/ 逛街購物+shopping，滿北京城的拋。忙得找不到北。坐功其到地鐵/tdu00a0u00a0u00a0tru00a0u00a0/tableu00a0u00a0table border=0 class="dragTable" cellspacing="0"u00a0u00a0u00a0tru00a0u00a0u00a0u00a0td新聞/tdu00a0u00a0u00a0/tru00a0u00a0u00a0tru00a0u00a0u00a0u00a0td對許多國人來說，五一是又一個消費和休息的好時光，而對某些人來說它并不意味著假期……這七天，一些人迎來了人生中的巨大成就，一些人仍在一線辛勤勞作，一些人遭遇天災(zāi)人禍不幸遇難，也有一些人因為拯救別人而失去了珍貴的生命……人們復(fù)雜的命運故事并不因為假期而中斷，看看這七天你離開的時候，那些大人物或者小人物身上又發(fā)生了什么樣的新故事/tdu00a0u00a0u00a0tru00a0u00a0/tableu00a0/tdu00a0td width="25%"u00a0u00a0table border=0 class="dragTable" cellspacing="0"u00a0u00a0u00a0tru00a0u00a0u00a0u00a0td體育/tdu00a0u00a0u00a0/tru00a0u00a0u00a0tru00a0u00a0u00a0u00a0td安全意識游客在出行前應(yīng)事先了解當(dāng)?shù)乇尘百Y料，挑選合適的時間、地點，做好身體、精神、物資和全面救助的準(zhǔn)備。/tdu00a0u00a0u00a0tru00a0u00a0/table/tdu00a0td width="25%"u00a0u00a0table border=0 class="dragTable" cellspacing="0"u00a0u00a0u00a0tru00a0u00a0u00a0u00a0td娛樂/tdu00a0u00a0u00a0/tru00a0u00a0u00a0tru00a0u00a0u00a0u00a0td制定預(yù)案設(shè)計線路盡量靠近公路，保證救援人員能夠及時到達(dá)。盡量選擇村莊和登山大本營等作為宿營地，盡量不安排露營。發(fā)生任何身體不適應(yīng)立即休息。/tdu00a0u00a0u00a0tru00a0u00a0/tableu00a0u00a0table border=0 class="dragTable" cellspacing="0"u00a0u00a0u00a0tru00a0u00a0u00a0u00a0td八卦/tdu00a0u00a0u00a0/tru00a0u00a0u00a0tru00a0u00a0u00a0u00a0td5月1日下午武漢中山公園“峽谷漂流”中兩艘漂流筏相撞導(dǎo)致翻船，造成2人重傷，4人輕傷。/tdu00a0u00a0u00a0tru00a0u00a0/tableu00a0/td/tr/table

/body/html

運行效果

表格的運行效果

表格拖曳效果

難點剖析

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

源碼下載