有点类似这个
http://community.csdn.net/Expert/topic/4239/4239286.xml?temp=.9276239我把其中的this改成this.parentElement，好像能实现，但是几分钟才能有相应
http://community.csdn.net/Expert/topic/4239/4239286.xml?temp=.9276239我把其中的this改成this.parentElement，好像能实现，但是几分钟才能有相应
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>one</title>
<style>
.removableObj
{
height:25;position:relative;
}
</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var objectObj=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()",10);
}function MouseOverFun(obj)
{
objectObj=obj;
}function swapFun()
{
if(sourceObj!=null && objectObj!=null )
sourceObj.swapNode(objectObj);
sourceObj=null;
objectObj=null;
}
</script>
</head><body><div align="center">
<table border="0" cellpadding="2" width="100%" id="table1">
<tr>
<td width="243" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">
<table width=100% bordercolorlight="#FFFF00" border="1" >
<thead><tr><th>
<p align="left">Title1
<a href="http://www.csdn.net">edit</a></th></tr></thead>
<tbody><tr><td>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</td></tr></tbody>
</table>
</td>
<td class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">
<table width=100% bordercolorlight="#FFFF00" border="1" >
<thead><tr><th>
<p align="left">Title2</th></tr></thead>
<tbody><tr><td>
<ul>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</td></tr></tbody>
</table>
</td>
<td class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">
<table width=100% bordercolorlight="#FFFF00" border="1" >
<thead><tr><th>
<p align="left">Title3</th></tr></thead>
<tbody><tr><td>
<ul>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</td></tr></tbody>
</table>
</td>
</tr>
<tr>
<td width="243" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">
<table width=100% bordercolorlight="#FFFF00" border="1" >
<thead><tr><th>
<p align="left">Title4</th></tr></thead>
<tbody><tr><td>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</td></tr></tbody>
</table>
</td>
<td class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">
<table width=100% bordercolorlight="#FFFF00" border="1" >
<thead><tr><th>
<p align="left">Title5</th></tr></thead>
<tbody><tr><td>
<ul>
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
</ul>
</td></tr></tbody>
</table>
</td>
<td class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">
<table width=100% bordercolorlight="#FFFF00" border="1" >
<thead><tr><th>
<p align="left">Title6</th></tr></thead>
<tbody><tr><td>
<ul>
<li>aaadf</li>
<li>bbadfb</li>
<li>ccadsfc</li>
</ul>
</td></tr></tbody>
</table>
</td>
</tr>
</table>
</div></body></html>
当我的焦点落在独立的table里面，比如title1，title2等的时候，我就是需要移动其中的表项了。我就是这里没有搞定啊。
（1）当鼠标在某表格的Thead上时，移动整个表格
（2）当鼠标在某表格的Tbody内时，移动Tbody内的那些five，six等等
页面位置你在加CSS或TABLE对齐下，粗略的代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>one</title>
<style>
.removableObj
{
height:25;position:relative;
}
</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var objectObj=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()",10);
}function MouseOverFun(obj)
{
objectObj=obj;
}function swapFun()
{
if(sourceObj!=null && objectObj!=null )
sourceObj.swapNode(objectObj);
sourceObj=null;
objectObj=null;
}
</script>
</head><body><div align="center">
<table border="0" cellpadding="2" width="100%" id="table1">
<tr>
<td width="243">
<table width=100% bordercolorlight="#FFFF00" border="1" >
<thead><tr><th>
<p align="left">Title1
<a href="http://www.csdn.net">edit</a></th></tr></thead>
<tbody><tr><td>
<ul>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">1</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">2</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">3</li>
</ul>
</td></tr></tbody>
</table>
</td>
<td>
<table width=100% bordercolorlight="#FFFF00" border="1" >
<thead><tr><th>
<p align="left">Title2</th></tr></thead>
<tbody><tr><td>
<ul>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">four</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">five</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">six</li>
</ul>
</td></tr></tbody>
</table>
</td>
<td>
<table width=100% bordercolorlight="#FFFF00" border="1" >
<thead><tr><th>
<p align="left">Title3</th></tr></thead>
<tbody><tr><td>
<ul>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">7</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">8</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">9</li>
</ul>
</td></tr></tbody>
</table>
</td>
</tr>
</table>
</div></body></html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>one</title>
<style>
.removableObj
{
height:25;position:relative;
}
</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var objectObj=null;
function MouseDownToMove(obj){
event.cancelBubble=true;
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
sourceObj=obj;
objectObj=null;
}function MouseMoveToMove(obj){
event.cancelBubble=true;
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
event.cancelBubble=true;
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
window.setTimeout("swapFun()",10);
}function MouseOverFun(obj)
{
event.cancelBubble=true;
objectObj=obj;
}function swapFun()
{
if(sourceObj!=null && objectObj!=null && sourceObj.tagName==objectObj.tagName)
sourceObj.swapNode(objectObj);
sourceObj=null;
objectObj=null;
}
</script>
</head><body><div align="center">
<table border="0" cellpadding="2" width="100%" id="table1">
<tr>
<td width="243">
<table width=100% bordercolorlight="#FFFF00" border="1" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">
<thead ><tr><th>
<p align="left">Title1
<a href="http://www.csdn.net">edit</a></th></tr></thead>
<tbody><tr><td>
<ul>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">1</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">2</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">3</li>
</ul>
</td></tr></tbody>
</table>
</td>
<td>
<table width=100% bordercolorlight="#FFFF00" border="1" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">
<thead ><tr><th>
<p align="left">Title2</th></tr></thead>
<tbody><tr><td>
<ul>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">four</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">five</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">six</li>
</ul>
</td></tr></tbody>
</table>
</td>
<td>
<table width=100% bordercolorlight="#FFFF00" border="1" class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">
<thead><tr><th>
<p align="left">Title3</th></tr></thead>
<tbody><tr><td>
<ul>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">7</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">8</li>
<li class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);">9</li>
</ul>
</td></tr></tbody>
</table>
</td>
</tr>
</table>
</div></body></html>
<head>
<title> Drag Demo 2 </title>
<style type="text/css">
<!--
#drag{
width:100px;
height:20px;
background-color:#eee;
border:1px solid #333;
position:absolute;
top:30px;
left:200px;
text-align:center;
cursor:default;
}
//-->
</style>
<script type="text/javascript">
<!--
window.onload=function(){
drag(document.getElementById('drag'),[200,400,30,30]);
};function drag(o,r){
o.onmousedown=function(a){
var d=document;if(!a)a=window.event;
var x=a.layerX?a.layerX:a.offsetX,y=a.layerY?a.layerY:a.offsetY;
if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove=function(a){
if(!a)a=window.event;
if(!a.pageX)a.pageX=a.clientX;
if(!a.pageY)a.pageY=a.clientY;
var tx=a.pageX-x,
ty=a.pageY-y;
o.style.left=tx<r[0]?r[0]:tx>r[1]?r[1]:tx;
o.style.top=ty<r[2]?r[2]:ty>r[3]?r[3]:ty;
}; d.onmouseup=function(){
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove=null;
d.onmouseup=null;
};
};
}
//-->
</script>
</head><body>
<div id="drag">drag me</div>
</body>
</html>
这个是随便写，楼主可以看着改，支持跨浏览器的。
写js还是靠自己琢磨，比较负责只能写到这里。楼主，研究一下比较好。尤其是跨浏览器部分。
----------------
验证好再用，请注意以下这句：
if(sourceObj!=null && objectObj!=null && sourceObj.tagName==objectObj.tagName)
它可以使一个table里的明细跟另一个table里的明细对调
如果要求“明细只能在table内部对调”，就把这一句改成：
if(sourceObj!=null && objectObj!=null && sourceObj.parentElement==objectObj.parentElement)
谢谢JK,luoying_81,hbhbhbhbhb1021等诸位因为对js不熟，抱歉再次麻烦各位http://community.csdn.net/Expert/topic/4519/4519968.xml?temp=.2551233此贴先结了，大家有时间的话再帮我看看上面这个