用table实现的拖拽sample

来源：互联网发布：淘宝店铺简介格式编辑：程序博客网时间：2024/05/02 02:22

<html>

<head>

<style>

*{}{font-size:12px}

.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;

}

td{}{vertical-align:top;}

#parentTable{}{

border-collapse:collapse;

letter-spacing:25px;

}

</style>

/**//****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/

var draged=false;

tdiv=null;

function dragStart(){

ao=event.srcElement;

if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;

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;

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++){

var parentCell=getInfo(parentTable.cells[i]);

if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){

var subTables=parentTable.cells[i].getElementsByTagName("table");

if(subTables.length==0){

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);

}

function dragEnd(){

if(!draged)return;

draged=false;

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){//从GOOGLE网站来,用于恢复位置

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(){//初始化

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",dragStart);

subTables[j].attachEvent("ondrag",draging);

subTables[j].attachEvent("ondragend",dragEnd);

}

inint();

</script>

</head>

<body>

<tr >

<tr>

<td><b>GMAIL</b></td>

</tr>

<tr>

<td>暂时无法显示GMAIL内容</td>

<tr>

</table><table border=0 class="dragTable" cellspacing="0">

<tr>

</tr>

<tr>

<td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角美加施冷箭</td>

<tr>

</table><table border=0 class="dragTable" cellspacing="0">

<tr>

</tr>

<tr>

<td>京广线中断4小时20临客返汉晚点

中国新闻网-湖北分社 - 所有 235 相关报道 ?哈马斯已有总理人选

解放日报报业集团 - 所有 489 相关报道 ?陈水扁是两岸关系麻烦制造者

武汉晨报 - 所有 179 相关报道 ?</td>

<tr>

</table>

</td>

<tr>

<td>中关村在线</td>

</tr>

<tr>

<td>新年行情速递双敏板卡低价推荐终于等到了，映泰6600GT一降降一百罗技G15游戏键盘热力促销，代购价仅529元 </td>

<tr>

</table></td>

<tr>

</tr>

<tr>

<td>上海GDP增幅去年出现回落应对反倾销中国鞋企联手对抗欧盟尹家绪操盘南方汽车长安谋求曲线整体境外上市</td>

<tr>

</table>

</td>

</tr>

</table>

</body>

</html>