JS实现数据拖动，从一个表格拖动到另一个表格带拖动效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title>WebForm2</title> <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <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.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 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" && oTable.cells[i].innerText.length > 1){ 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(){ for(var i=0; i<oTable.cells.length; i++){ document.all["kc_name"+i].value = oTable.cells[i].innerHTML; //alert(document.all["kc_name"+i].value) } } 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(); } </SCRIPT> </HEAD> <body MS_POSITIONING="GridLayout"> <form name="Form1" method="post" action="WebForm11.aspx" id="Form1"> <table id="tb1" cellspacing="0" onMouseDown="showDiv('1')" onselectstart="return false;" border="0" style="width:200px;border-collapse:collapse;BORDER-RIGHT:black 1px solid; BORDER-TOP:black 1px solid; FONT-SIZE:13px; BORDER-LEFT:black 1px solid; BORDER-BOTTOM:black 1px solid"> <tr> <td>语文</td> </tr> <tr> <td>数学</td> </tr> <tr> <td>英语</td> </tr> <tr> <td>物理</td> </tr> <tr> <td>化学</td> </tr> <tr> <td>地理</td> </tr> <tr> <td>生物</td> </tr> <tr> <td>历史</td> </tr> <tr> <td>政治</td> </tr> </table> <TABLE style="BORDER-RIGHT:black 1px solid; BORDER-TOP:black 1px solid; FONT-SIZE:13px; BORDER-LEFT:black 1px solid; BORDER-BOTTOM:black 1px solid" id="tb2" onMouseDown="showDiv('2')" onselectstart="return false;" cellpadding="0" cellspacing="1" bordercolor="#ffccff" bgcolor="#999999" width="200"> <tr align="center" width="50"> <td height="22" bgcolor="#FFFFFF"> </td> </tr> <tr align="center" width="50"> <td height="22" bgcolor="#FFFFFF"> </td> </tr> <tr align="center" width="50"> <td height="22" bgcolor="#FFFFFF"> </td> </tr> <tr align="center" width="50"> <td height="22" bgcolor="#FFFFFF"> </td> </tr> <tr align="center" width="50"> <td height="22" bgcolor="#FFFFFF"> </td> </tr> <tr align="center" width="50"> <td height="22" bgcolor="#FFFFFF"> </td> </tr> <tr align="center" width="50"> <td height="22" bgcolor="#FFFFFF"> </td> </tr> <tr align="center" width="50"> <td height="22" bgcolor="#FFFFFF"> </td> </tr> <tr align="center" width="50"> <td height="22" bgcolor="#FFFFFF"> </td> </tr> <input type="hidden" name="kc_name0" value=""> <input type="hidden" name="kc_name1" value=""> <input type="hidden" name="kc_name2" value=""> <input type="hidden" name="kc_name3" value=""> <input type="hidden" name="kc_name4" value=""> <input type="hidden" name="kc_name5" value=""> <input type="hidden" name="kc_name6" value=""> <input type="hidden" name="kc_name7" value=""> <input type="hidden" name="kc_name8" value=""> </TABLE> <DIV id="tempDiv" onselectstart="return false" style="cursor:hand;position:absolute; border:1px solid black; background-color:#FFCCFF; display:none"> </DIV> </form> </body> </HTML>