实例名称

Ajax实现可拖曳的表格效果

实例描述

Ajax技术已经被越多越多的人关注，其允许用户自己定制界面。本例介绍如何利用Ajax实现可拖曳的表格，允许用户通过拖曳表格定制自己的界面。

实例代码

html xmlns="" head title无标题页-学无忧*font-size:font-size:12px;border-top:1px solid #3366cc;margin-bottom: 10px;width:100%;background-color:#FFFFFF;tdvertical-align:top;.dragTRcursor:move;color:#7787cc;background-color:#e5eef9;height:20px;padding-left:5px;font-weight:bold;#parentTableborder-collapse:collapse;letter-spacing:25px;/stylescript defervar Drag=dragged:false，ao:null，tdiv:null，dragStart:function //创建新的DIV=;=="TD"||=="TR"=;=100;elsereturn;=true;="div";=;="1px dashed red";="block";="absolute";="alphaopacity=70";="move";="1px solid #";=;=;=;=;;=;=;=;=;，

draging:function //判断鼠标的位置

if!||==nullreturn;

var tX=;

var tY=;

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

iftX==== subTables="table";==0iftX====;break;forvar j=0;;j++var subTable=;iftX====，subTablesj;break;else;，dragEnd:function //拖拽完毕if!;=false;=，15;="0px";="1px solid #3366cc";="0px";=1;，getInfo:functiono //取得坐标var to=new Object;====0;var twidth=o.offsetWidth;var theight=o.offsetHeight;whileo!=+=o.offsetLeft;+=o.offsetTop;o=o.offsetParent;=+twidth;=+theight;return to;，repos:functionaa，abvar f=;var tl=;var tt=;var kl=;var kt=;var kf=f/ab;return setIntervalfunctionifab1;;=null;return;ab--;tl-=kl;tt-=kt;f-=kf;=parseInttl+"px";=parseInttt+"px";=f;，aa/ab，inint:function //初始化表格forvar i=0;;i++var subTables="table";forvar j=0;;j++!="dragTable"break;="dragTR";"onmousedown"，;=;=;;/script

拖曳标题栏需要专门的样式。本例主要用到的样式表如下所示：/headbody 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"trtdb天气预报/b/td/trtrtd本地近3天持续降温，请注意防寒/tdtr/tabletable border=0 class="dragTable" cellspacing="0"trtd我的日记/td/trtrtd今天天气非常美好br/ 逛街购物+shopping，满北京城的抛。忙得找不到北。坐功其到地铁/tdtr/tabletable border=0 class="dragTable" cellspacing="0"trtd新闻/td/trtrtd对许多国人来说，五一是又一个消费和休息的好时光，而对某些人来说它并不意味着假期……这七天，一些人迎来了人生中的巨大成就，一些人仍在一线辛勤劳作，一些人遭遇天灾人祸不幸遇难，也有一些人因为拯救别人而失去了珍贵的生命……人们复杂的命运故事并不因为假期而中断，看看这七天你离开的时候，那些大人物或者小人物身上又发生了什么样的新故事/tdtr/table/tdtd width="25%"table border=0 class="dragTable" cellspacing="0"trtd体育/td/trtrtd安全意识游客在出行前应事先了解当地背景资料，挑选合适的时间、地点，做好身体、精神、物资和全面救助的准备。/tdtr/table/tdtd width="25%"table border=0 class="dragTable" cellspacing="0"trtd娱乐/td/trtrtd制定预案设计线路尽量靠近公路，保证救援人员能够及时到达。尽量选择村庄和登山大本营等作为宿营地，尽量不安排露营。发生任何身体不适应立即休息。/tdtr/tabletable border=0 class="dragTable" cellspacing="0"trtd八卦/td/trtrtd5月1日下午武汉中山公园“峡谷漂流”中两艘漂流筏相撞导致翻船，造成2人重伤，4人轻伤。/tdtr/table/td/tr/table

/body/html

运行效果

表格的运行效果

表格拖曳效果

难点剖析

本例中script元素后面不再是“language=’javascript’”的屙陛，而使用了“defer”。“defer”表示在页面加载完毕后再运行．JavaScript．代码，这样可以防止出现找不到对象的问题。“defer”还可以使脚本在后台被下载，前台的内容则正常显示给用户。

源码下载