如题。
现在有个需求需要实现这样的效果：
可以通过拖动A表中的行到B表实现把A表中的某行复制到B表，并且可以对B表中的行进行拖动排序。
即：
在A表的ID为1的行上按下鼠标左键，在拖动过程中被拖动的行的副本应随着鼠标移动，然后拖动到B表上访后松开鼠标左键，这时A表中ID为1的行就出现在了B表中，并且可以拖动B表中的ID为1或者5的行进行排序。
请问如何实现？
现在有个需求需要实现这样的效果：
可以通过拖动A表中的行到B表实现把A表中的某行复制到B表，并且可以对B表中的行进行拖动排序。
即：
在A表的ID为1的行上按下鼠标左键，在拖动过程中被拖动的行的副本应随着鼠标移动，然后拖动到B表上访后松开鼠标左键，这时A表中ID为1的行就出现在了B表中，并且可以拖动B表中的ID为1或者5的行进行排序。
请问如何实现？
页面 dom对象的操作 建立 显示 移动 隐藏
真对表格行的拖动事件的时机，模拟上面几个都能实现了 组合起来就是 表格拖动操作
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖拽表格的行</title>
</head>
<body>
<table border="1" style="background-color:#999999;" cellpadding="0px;" cellspacing="0px" id="dragBbb" onMouseDown="draginit(this)">
<tr>
<td width="73">序号</td>
<td width="52">姓名</td>
<td width="65">年龄</td>
<td width="83">地址</td>
</tr>
<tr>
<td width="73">1</td>
<td width="52">张三</td>
<td width="65">22</td>
<td width="83">北京海淀</td>
</tr>
<tr>
<td >2</td>
<td>王五</td>
<td>24</td>
<td>上海浦东</td>
</tr>
<tr>
<td>3</td>
<td>朝气</td>
<td>28</td>
<td>广州深圳</td>
</tr>
<tr>
<td>4</td>
<td>反对</td>
<td>27</td>
<td>反对说</td>
</tr>
<tr>
<td>5</td>
<td>离开</td>
<td>25</td>
<td>热舞</td>
</tr>
</table>
<br/>
<br/>
<table border="1" style="background-color:#999999;" cellpadding="0px;" cellspacing="0px" id="dragAaa111" onMouseDown="draginit(this)">
<tr>
<td width="73">序号</td>
<td width="52">姓名</td>
<td width="65">年龄</td>
<td width="83">地址</td>
</tr>
<tr>
<td width="73">1</td>
<td width="52">张三</td>
<td width="65">22</td>
<td width="83">北京海淀</td>
</tr>
<tr>
<td >2</td>
<td>王五</td>
<td>24</td>
<td>上海浦东</td>
</tr>
<tr>
<td>3</td>
<td>朝气</td>
<td>28</td>
<td>广州深圳</td>
</tr>
</table><STYLE type=text/css>
table{
cursor:hand;
}
</STYLE>
<script language="javascript" >
var obj;
var xx=0,yy=0;
var tagobj;
var dragobj;
var tableOb;
function draginit(obj){
var tblRows = document.getElementsByTagName("TR"); //获取所有的表格行
tableOb=doClick(obj); //获取表格对象
this.style
for(var i=0;i<tblRows.length;i++){ //遍历每一行
if((tblRows[i].parentNode.parentNode.id).toString().indexOf("drag")!=-1){
tblRows[i].onmousedown=mousedown; //绑定所有的鼠标事件
tblRows[i].ondragover=dragover;
tblRows[i].ondragend=dragend;
tblRows[i].ondrag=dragmove;
tblRows[i].style.position="relative";
tblRows[i].style.zIndex=1;
}
}
}
function mousedown(){ //鼠标按下时的处理
obj = event.srcElement; //获取点击对象
if(obj.tagName=="TD") obj=obj.parentNode; //如果是单元格
if(obj.tagName!="TR") return false; //如果是单元行
if(obj.rowIndex==0) return false; //如果是标题
yy=event.clientY; //鼠标的x坐标和y坐标
xx=event.clientX;
obj.style.zIndex=0;
try{
obj.dragDrop();
}catch(e){
}
}
function dragmove(){ //表格拖拽移动时的位置获取
obj.style.top = event.clientY-yy;
obj.style.left = event.clientX-xx;
}
function dragover(){ //鼠标拖动时的操作
tagobj=event.srcElement;
if(tagobj.tagName=="TD"){tagobj=tagobj.parentNode;}//如果是单元格
if(tagobj.tagName!="TR")return false; //如果是单元行
}
function dragend(){ //拖拽完毕后的处理-高度，宽度等
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=1;
if(tagobj!=null && tagobj.rowIndex!=0){
var t1=tableOb.rows[obj.rowIndex];
var t2=tableOb.rows[tagobj.rowIndex];
tableOb.getElementsByTagName('tbody')[0].insertBefore(obj,tagobj);//实现表格单元行的互换
tagobj.style.zIndex=1;
}
tagobj=null;
}
//以下是获取表格对象
function searchObjByTagName(obj, tag)
{
while(obj!=null&&typeof(obj.tagName)!="undefind")
{
if(obj.tagName == tag.toUpperCase()) return(obj);
obj = obj.parentElement;
}
return null;
}
function doClick(curTd)
{
ClickedItemName = curTd.id;
var table = searchObjByTagName(curTd,"TABLE");
return table;
}
</script>
</body>
</html>