JS实现数据拖动，从一个报表拖动到另一个表格带拖动效果
日期：2014-05-16 浏览次数：20411 次
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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
