代码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 >
< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD > 3 </ TD >< TD > 3 </ TD >< TD > 3 </ TD ></ TR >
< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD > 4 </ TD >< TD > 4 </ TD >< TD > 4 </ TD ></ TR >
< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD > 5 </ TD >< TD > 5 </ TD >< TD > 5 </ TD ></ TR >
< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD > 6 </ TD >< TD > 6 </ TD >< TD > 6 </ TD ></ TR >
< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD > 7 </ TD >< TD > 7 </ TD >< TD > 7 </ TD ></ TR >
</ TABLE >
</ body >
</ html >
代码2:
< 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 >
< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD > 3 </ TD >< TD > 3 </ TD >< TD > 3 </ TD ></ TR >
< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD > 4 </ TD >< TD > 4 </ TD >< TD > 4 </ TD ></ TR >
< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD > 5 </ TD >< TD > 5 </ TD >< TD > 5 </ TD ></ TR >
< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD > 6 </ TD >< TD > 6 </ TD >< TD > 6 </ TD ></ TR >
< TR bgcolor =#ffffff style ='height:25;position:relative;' onmousedown ='MouseDownToMove(this)' onmousemove ='MouseMoveToMove(this)' onmouseup ='MouseUpToMove(this);' >< TD > 7 </ TD >< TD > 7 </ TD >< TD > 7 </ TD ></ TR >
</ TABLE >
</ body >
</ html >
<
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 >
< 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操作 ------ 拖拽行为并且使其自动贴附
,如需转载请自行联系原博主。