js table操作 ------ 拖拽行为并且使其自动贴附-阿里云开发者社区

代码1：

< html >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >

< title > JK:支持民族工业,尽量少买X货 </ title >

< script language ="javascript" >

var beginMoving=false;

function MouseDownToMove(obj){

obj.style.zIndex=1;

obj.mouseDownY=event.clientY;

obj.mouseDownX=event.clientX;

beginMoving=true;

obj.setCapture();

}

function MouseMoveToMove(obj){

if(!beginMoving) return false;

obj.style.top = (event.clientY-obj.mouseDownY);

obj.style.left = (event.clientX-obj.mouseDownX);

}

function MouseUpToMove(obj){

if(!beginMoving) return false;

obj.releaseCapture();

obj.style.top=0;

obj.style.left=0;

obj.style.zIndex=0;

beginMoving=false;

var tempTop=event.clientY-obj.mouseDownY;

var tempRowIndex=(tempTop-tempTop%25)/25;

if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;

else tempRowIndex=tempRowIndex+obj.rowIndex;

if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;

obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);

}

</ script >

</ head >

< body >

< TABLE WIDTH ="300" BORDER ="1" >

< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD bgcolor =blue > 0 </ TD >< TD > 0 </ TD >< TD > 0 </ TD ></ TR >

< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD bgcolor =black > 1 </ TD >< TD > 1 </ TD >< TD > 1 </ TD ></ TR >

< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD bgcolor =red > 2 </ TD >< TD > 2 </ TD >< TD > 2 </ TD ></ TR >

</ TABLE >

</ body >

</ html >

代码2：

< html >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >

< title > JK:支持民族工业,尽量少买X货 </ title >

< style >

.removableObj

{

height:25;position:relative;

}

</ style >

< script language ="javascript" >

var beginMoving=false;

var sourceObj=null;

var objectObj=null;

var objectObj2=null;

function MouseDownToMove(obj){

obj.style.zIndex=1;

obj.mouseDownY=event.clientY;

obj.mouseDownX=event.clientX;

beginMoving=true;

obj.setCapture();

sourceObj=obj;

objectObj=null;

}

function MouseMoveToMove(obj){

if(!beginMoving) return false;

obj.style.top = (event.clientY-obj.mouseDownY);

obj.style.left = (event.clientX-obj.mouseDownX);

}

function MouseUpToMove(obj){

if(!beginMoving) return false;

obj.releaseCapture();

obj.style.top=0;

obj.style.left=0;

obj.style.zIndex=0;

beginMoving=false;

window.setTimeout("swapFun()",20);

}

function MouseOverFun(obj)

{

if(obj==sourceObj) return false;

objectObj=obj;

}

function MouseOverFun2(obj)

{

objectObj2=obj;

}

function swapFun()

{

if(sourceObj!=null && objectObj!=null) objectObj.insertAdjacentElement("beforeBegin",sourceObj);

else if(sourceObj!=null && objectObj2!=null) objectObj2.insertAdjacentElement("beforeEnd",sourceObj);

sourceObj=null;

objectObj=null;

objectObj2=null;

}

</ script >

</ head >

< body >

< table border ="1" width ="100%" height ="58" >

< tr >

< td width ="34%" valign ="top" height ="46" onmouseover ="MouseOverFun2(this);" >

< table border ="1" width ="100%" bgcolor ="#99CCFF" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" >

< tr >

< td width ="23%" > 和 </ td >

< td width ="21%" > 飞过海 </ td >

</ tr >

< tr >

< td width ="23%" > 　 </ td >

< td width ="21%" > 　 </ td >

</ tr >

</ table >< table border ="1" width ="100%" bgcolor ="#FFCCFF" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" >

< tr >

< td width ="21%" > 还是 </ td >

< td width ="35%" > 护身符哈 </ td >

</ tr >

< tr >

< td width ="21%" > ， </ td >

< td width ="35%" > 和是是护 </ td >

</ tr >

</ table >

< table border ="1" width ="100%" bgcolor ="#00CC99" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" >

< tr >

< td width ="21%" > 还是 </ td >

< td width ="9%" > 　 </ td >

< td width ="35%" > 呵呵 </ td >

</ tr >

< tr >

< td width ="21%" > ， </ td >

< td width ="9%" > 　 </ td >

< td width ="35%" > 和 </ td >

</ tr >

</ table >

</ td >

< td width ="32%" valign ="top" height ="52" onmouseover ="MouseOverFun2(this);" >

< table border ="1" width ="100%" bgcolor ="#FF0000" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" >

< tr >

< td width ="21%" > 还是 </ td >

</ tr >

< tr >

< td width ="21%" > ， </ td >

</ tr >

</ table >

< table border ="1" width ="100%" bgcolor ="#00FFFF" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" >

< tr >

< td width ="21%" > 还是 </ td >

< td width ="35%" > 护身符哈 </ td >

< td width ="21%" > 　 </ td >

< td width ="23%" > 呵呵 </ td >

</ tr >

< tr >

< td width ="21%" > ， </ td >

< td width ="35%" > 和是是护 </ td >

< td width ="21%" > 　 </ td >

< td width ="23%" > 和 </ td >

</ tr >

</ table >

</ td >

< td width ="34%" valign ="top" height ="52" onmouseover ="MouseOverFun2(this);" >

< table border ="1" width ="100%" bgcolor ="#FF9966" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" >

< tr >

< td width ="21%" > 还是 </ td >

< td width ="35%" > 护身符哈 </ td >

< td width ="21%" > 　 </ td >

< td width ="23%" > 呵呵 </ td >

</ tr >

< tr >

< td width ="21%" > ， </ td >

< td width ="35%" > 和是是护 </ td >

< td width ="21%" > 　 </ td >

< td width ="23%" > 和 </ td >

</ tr >

</ table >

< table width ="100%" border ="1" bgcolor ="#FFFFCC" class ="removableObj" onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' onmouseover ="MouseOverFun(this);" >

< tr >

< td width ="87" >   输多发 </ td >

< td width ="115" > 嘎撒递归 </ td >

</ tr >

< tr >

< td width ="87" > 嘎大嘎 </ td >

< td width ="115" > 大幅度 </ td >

</ tr >

< tr >

< td width ="87" > 过大撒 </ td >

< td width ="115" > 嘎 </ td >

</ tr >

</ table ></ td >

</ tr >

</ table >

</ body >

</ html >

本文转自博客园执着的笨蛋的博客，原文链接：js table操作 ------ 拖拽行为并且使其自动贴附，如需转载请自行联系原博主。

js table操作 ------ 拖拽行为并且使其自动贴附

热门文章

最新文章

相关课程

相关电子书

相关实验场景