<!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>
详细解决方案
JS实现数据拖动，从一个报表拖动到另一个表格带拖动效果
热度：155 发布时间：2013-09-11 16:26:28.0
相关解决方案