我用的下面的链接里的JavaScript方法进行拖动，这个方法是可行的，但是当表格行数比较长时，后面的表格就拖不动了。
我试过很多修改，也没能成功，请大家帮我一下，当你深入研究之后，能修改到可以拖动任何表格了，请回复贴，不要提供理论上的指导，谢谢！！
http://study.qqcf.com/web/568/156086.htm
我试过很多修改，也没能成功，请大家帮我一下，当你深入研究之后，能修改到可以拖动任何表格了，请回复贴，不要提供理论上的指导，谢谢！！
http://study.qqcf.com/web/568/156086.htm
<head>
<title>这是排座位了</title> <script language="javascript">
/*--------全局变量-----------*/
var x0,y0,x1,y1,isreplace;
var movable = false;
var preCell = null;
var normalColor = null;
var preColor = "lavender";
var endColor = "#FFCCFF";
/*--------全局变量-----------*/
//得到控件的绝对位置
function getPos(cell)
{
var pos = new Array();
var t=cell.offsetTop;
var l=cell.offsetLeft;
while(cell=cell.offsetParent)
{
t+=cell.offsetTop;
l+=cell.offsetLeft;
}
pos[0] = t; //纵坐标
pos[1] = l; //横坐标
return pos;
}
//当鼠标拖动某一个td时,显示临时图层
function showDiv(ischange)
{
var ischange=ischange
isreplace=ischange //得到触发该事件的是哪个table来决定是否替换
var obj = event.srcElement; //得到触发该事件的对象,也就是对触发该事件对象的一个引用
var pos = new Array(); //定义一个数组用来存放位置参数
//获取过度图层
var oDiv = document.all.tempDiv; //对临时层的一个引用
if(obj.tagName.toLowerCase() == "td")
{
obj.style.cursor = "hand"; //当按下鼠标时,鼠标模式改成手型
pos = getPos(obj); //得到该td的位置(包括横纵坐标)
//计算中间过度层位置，赋值
oDiv.style.width = obj.offsetWidth; //得到td的宽,赋值给临时层tempDiv
oDiv.style.height = obj.offsetHeight; //得到td的高,赋值给临时层tempDiv
oDiv.style.top = pos[0]; //得到该td的纵坐标的位置,赋值给临时层tempDiv
oDiv.style.left = pos[1]; //得到该td的横坐标的位置,赋值给临时层tempDiv
oDiv.innerHTML = obj.innerHTML; //得到该td的文本显示内容,赋值给临时层tempDiv
//oDiv.id=obj.id;///////////////////////////////////////////////////////////////
oDiv.style.display = ""; //显示临时层,也就是当鼠标选中某一个td,按下去时显示的那个紫红色的框框
x0 = pos[1];
y0 = pos[0];
x1 = event.clientX; //返回当前鼠标所在位置的横坐标
y1 = event.clientY; //返回当前鼠标所在位置的纵坐标
//记住原td
normalColor = obj.style.backgroundColor; //得到触发该事件对象的背景色
obj.style.backgroundColor = preColor; //改变触发该事件的对象的背景色
preCell = obj; //赋值给另外一个空对象(属公共的变量)
movable = true; //标识有td在移动
}
}
//当拖动一个td时,经过其他td时所处理的事件
function dragDiv()
{
if(movable) //当上面的showDiv事件为真时,执行下面的代码
{
var oDiv = document.all.tempDiv; //对临时层的一个引用
var pos = new Array(); //定义一个存放位置的数组
oDiv.style.top = event.clientY - y1 + y0; //定义临时层的位置(纵坐标)为:当前鼠标位置(纵坐标)-按下鼠标时的鼠标位置(纵坐标)+原来td的纵坐标
oDiv.style.left = event.clientX - x1 + x0; //定义临时层的位置(横坐标)为:当前鼠标位置(横坐标)-按下鼠标时的鼠标位置(横坐标)+原来td的横坐标
var oTable = document.all.tb2;
//根据条件显示不同背景色
for(var i=0; i<oTable.cells.length; i++)
{
if(oTable.cells[i].tagName.toLowerCase() == "td")
{
pos = getPos(oTable.cells[i]);
if(event.x>pos[1] && event.x<pos[1]+oTable.cells[i].offsetWidth && event.y>pos[0] && event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i] != preCell)
oTable.cells[i].style.backgroundColor = endColor;
}
else
{
if(oTable.cells[i] != preCell)
oTable.cells[i].style.backgroundColor = normalColor;
}
}
}
}
}
function hideDiv()
{
if(movable)
{
var oTable = document.all.tb2;
var oTable1=document .all.tb3;
var pos = new Array();
if(preCell != null)
{
for(var i=0; i<oTable.cells.length; i++)
{
pos = getPos(oTable.cells[i]);
//计算鼠标位置，是否在某个单元格的范围之内
if(event.x>pos[1]&&event.x<pos[1]+oTable.cells[i].offsetWidth && event.y>pos[0]&& event.y<pos[0]+oTable.cells[i].offsetHeight)
{
if(oTable.cells[i].tagName.toLowerCase() == "td" && oTable.cells[i].style.backgroundColor.toLowerCase()=="#ffccff")
{
if(isreplace=="2"){ //如果是下面表格内部拖动,则内容互换
preCell.innerHTML = oTable.cells[i].innerHTML;
}
//当下面的td中有内容时,则上面的课程将与下面互换----注意:这个if和下面紧接着的if位置不能互换.
if(isreplace=="1" && document.all.tempDiv.innerHTML.length > 0){
if(oTable.cells[i].innerHTML=="学生姓名"){
document.all.tb1.deleteRow(preCell.parentElement.rowIndex);
}else{
preCell.innerHTML=oTable.cells[i].innerHTML;
}
oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
}
//当下面的td中没有内容时,则上面将被移除----注意:这个if和上面紧接着的if位置不能互换.
if(isreplace=="1" && oTable.cells[i].innerText.length == 1){
preCell.innerHTML=""
oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
}
if(isreplace=="2"){
oTable.cells[i].innerHTML = document.all.tempDiv.innerHTML;
}
//清除原单元格和目标单元格的样式
preCell.style.backgroundColor = normalColor;
oTable.cells[i].style.backgroundColor = normalColor;
oTable.cells[i].style.cursor = "";
preCell.style.cursor = "";
preCell.style.backgroundColor = normalColor;
}
}
}
}
movable = false;
//清除提示图层
document.all.tempDiv.style.display = "none";
}
}
//在页面提交时触发下面的事件,给隐藏字段赋值
function getvalue(){
var oTable = document.all.tb2;
var oTable1=document .all.tb3;
for(var i=0; i<oTable.cells.length; i++){
document.all["bb"+i].value = oTable.cells[i].innerHTML;
}
for(var i=0; i<oTable1.cells.length; i++){
// alert ("2");
document.all["bbs"+i].value = oTable1.cells[i].innerHTML;
}
}
document.onmouseup = function()
{
hideDiv();
var oTable = document.all.tb2;
for(var i=0; i<oTable.cells.length; i++)
oTable.cells[i].style.backgroundColor = normalColor;
}
document.onmousemove = function()
{
dragDiv();
}
function install()
{
var row = document.all.row.value;
var col = document.all.col.value;
var oTable = document.all.tb2;//tb2是一个无行列的表格
var oTable1 = document.all.tb3;
var odiv = document.all.hidden;//这是一个隐藏的DIV
/*--------清除以前的数据-----------*/
var rowNum=oTable.rows.length;
for (var p=0;p<rowNum;p++)
{
oTable.deleteRow(p);
rowNum=rowNum-1;
p=p-1;
}
odiv.innerHTML="";
/*--------清除以前的数据-----------*/
for (var i=0;i<row;i++){
var _tr=oTable.insertRow(oTable.rows.length);
for (var j=0;j<col;j++){
var _td=_tr.insertCell(_tr.cells.length);
_td.attachEvent("onmouseover",show);
_td.attachEvent("onmouseout",hide);
_txt=document.createTextNode("学生姓名");
_td.appendChild(_txt);
}
}
var _tr1=oTable1.insertRow(oTable1.rows.length);
for (var j=0;j<col;j++){
var _td1=_tr1.insertCell(_tr1.cells.length);
_td1.attachEvent("onmouseover",show);
_td1.attachEvent("onmouseout",hide);
_txt1=document.createTextNode("学生ID");
_td1.appendChild(_txt1);
}
}
for(var m=0;m<row*col;m++)//根据行列创建文本控件
{
var _input=document.createElement('input');
_input.setAttribute('type', 'text');
_input.setAttribute('size', '8');
_input.setAttribute('id', 'bb'+m);
odiv.appendChild(_input);
}
for(var m=0;m<row*col;m++)//根据行列创建文本控件
{
var _input1=document.createElement('input');
_input1.setAttribute('type', 'text');
_input1.setAttribute('size', '4');
_input1.setAttribute('id', 'bbs'+m);
odiv.appendChild(_input1);
}
}
var delobj;
function show()
{
var obj = event.srcElement;
if(obj.innerHTML!=""){
delobj = obj;
var del = document.all.delDiv;
var pos = new Array();
pos = getPos(obj);
var x = pos[1] + obj.offsetWidth - 15;
var y = pos[0] + obj.offsetHeight - 15;
del.style.left = x;
del.style.top = y;
del.style.display = "";
}
}
function hide()
{
var pos = new Array();
pos = getPos(delobj);
var x = pos[1] + delobj.offsetWidth;
var y = pos[0] + delobj.offsetHeight;
xx = event.clientX;
yy = event.clientY;
if(!(xx<x && xx>pos[1] && yy<y && yy>pos[0])){
var del = document.all.delDiv;
del.style.display = "none";
}
} function del()
{
if(delobj.innerHTML!="学生姓名"){
var oTable1 = document.all.tb1;
var _tr=oTable1.insertRow(oTable1.rows.length);
var _td=_tr.insertCell(_tr.cells.length);
_txt=document.createTextNode(delobj.innerHTML);
_td.appendChild(_txt);
}
delobj.innerHTML="学生姓名";
}
</script> <style type="text/css">
#tb1
{
border-right: black 1px solid;
border-top: black 1px solid;
font-size: 13px;
border-left: black 1px solid;
width: 80px;
border-bottom: black 1px solid;
border-collapse: collapse;
}
#tb1 TD
{
cursor: pointer;
}
#tb2
{
font-size: 13px;
}
#tb2 TD
{
border-right: black 1px solid;
border-top: black 1px solid;
border-left: black 1px solid;
width: 80px;
cursor: pointer;
border-bottom: black 1px solid;
height: 25px;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
行：<input id="row" size="6">
列：<input id="col" size="6">
<input onclick="install();" type="button" value="设定">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top">
<table onselectstart="return false;" onmousedown="showDiv('1')" id="tb1" cellspacing="0"
runat="server" border="0">
<tbody>
</tbody>
</table>
</td>
<td valign="top">
<table onselectstart="return false;" onmousedown="showDiv('2')" id="tb2" cellspacing="10"
cellpadding="0">
<tbody>
</tbody>
</table>
<div onselectstart="return false" id="tempDiv" style="border-right: black 1px solid;
border-top: black 1px solid; display: none; font-size: 12px; border-left: black 1px solid;
cursor: hand; border-bottom: black 1px solid; position: absolute; background-color: #ffccff">
</div>
<div id="delDiv" style="display: none; cursor: hand; position: absolute">
<img onclick="del()" src="images/del.gif" border="0">
</div>
</td>
<td valign="top">
<table onselectstart="return false;" onmousedown="showDiv('2')" id="tb3" cellspacing="10"
cellpadding="0">
<tbody>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<input onclick="getvalue()" type="button" value="获取排列名单">
<hr>
<div id="hidden" style="width: 600px">
<%--得到排好座位的值--%>
</div>
</form>
</body></html>
public partial class 排座位 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{ for (int i = 0; i < 10; i++)
{
HtmlTableRow tr = new HtmlTableRow();
HtmlTableCell tc = new HtmlTableCell();
tc.ID = "course" + i.ToString();
tc.InnerText = i.ToString() + "|" + i + "name";
tr.Controls.Add(tc);
tb1.Rows.Add(tr);
} } }