求"可对前台页面中table的行或列进行拖曳的代码?" 支持对选中的单行/列或多相进行相互间的拖曳.............. 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 不难吧,可以参看http://www.google.com/ig 的代码,俺就在本地实现了。 <!-- 欢迎转载,请保留作者及其出处,谢谢 --> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>拖动</TITLE> <STYLE> td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;} div{font-size:13px;} th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC} table{border:1px solid black;font-size:13px;} </STYLE> <script language="javascript"> /************************************ dragedTableData.js *******************************/ /************************************ dragedTableData.js *******************************/ /* * created by LxcJie 2004.4.12 * 可以实现表格内容的内部拖动 * 确保中间过度层的存在,id为指定 */ /*--------全局变量-----------*/ var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1; var dragedTable_movable = false; var dragedTable_preCell = null; var dragedTable_normalColor = null; //起始单元格的颜色 var dragedTable_preColor = "lavender"; //目标单元格的颜色 var dragedTable_endColor = "#FFCCFF"; var dragedTable_movedDiv = "dragedTable_movedDiv"; var dragedTable_tableId = ""; /*--------全局变量-----------*/ function DragedTable(tableId) { dragedTable_tableId = tableId; var oTempDiv = document.createElement("div"); oTempDiv.id = dragedTable_movedDiv; oTempDiv.onselectstart = function(){return false}; oTempDiv.style.cursor = "hand"; oTempDiv.style.position = "absolute"; oTempDiv.style.border = "1px solid black"; oTempDiv.style.backgroundColor = dragedTable_endColor; oTempDiv.style.display = "none"; document.body.appendChild(oTempDiv); document.all(tableId).onmousedown = showDiv; } //得到控件的绝对位置 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; } //显示图层 function showDiv() { var obj = event.srcElement; var pos = new Array(); //获取过度图层 var oDiv = document.all(dragedTable_movedDiv); if(obj.tagName.toLowerCase() == "td") { obj.style.cursor = "hand"; pos = getPos(obj); //计算中间过度层位置,赋值 oDiv.style.width = obj.offsetWidth; oDiv.style.height = obj.offsetHeight; oDiv.style.top = pos[0]; oDiv.style.left = pos[1]; oDiv.innerHTML = obj.innerHTML; oDiv.style.display = ""; dragedTable_x0 = pos[1]; dragedTable_y0 = pos[0]; dragedTable_x1 = event.clientX; dragedTable_y1 = event.clientY; //记住原td dragedTable_normalColor = obj.style.backgroundColor; obj.style.backgroundColor = dragedTable_preColor; dragedTable_preCell = obj; dragedTable_movable = true; } } function dragDiv() { if(dragedTable_movable) { var oDiv = document.all(dragedTable_movedDiv); var pos = new Array(); oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0; oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0; var oTable = document.all(dragedTable_tableId); 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] != dragedTable_preCell) oTable.cells[i].style.backgroundColor = dragedTable_endColor; } else { if(oTable.cells[i] != dragedTable_preCell) oTable.cells[i].style.backgroundColor = dragedTable_normalColor; } } } } } function hideDiv() { if(dragedTable_movable) { var oTable = document.all(dragedTable_tableId); var pos = new Array(); if(dragedTable_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") { //交换文本 dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML; oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML; //清除原单元格和目标单元格的样式 dragedTable_preCell.style.backgroundColor = dragedTable_normalColor; oTable.cells[i].style.backgroundColor = dragedTable_normalColor; oTable.cells[i].style.cursor = ""; dragedTable_preCell.style.cursor = ""; dragedTable_preCell.style.backgroundColor = dragedTable_normalColor; } } } } dragedTable_movable = false; //清除提示图层 document.all(dragedTable_movedDiv).style.display = "none"; } } document.onmouseup = function() { hideDiv(); var oTable = document.all(dragedTable_tableId); for(var i=0; i<oTable.cells.length; i++) oTable.cells[i].style.backgroundColor = dragedTable_normalColor; } document.onmousemove = function() { dragDiv(); } /************************************ dragedTableData.js 结束 *******************************/ /************************************ dragedTableData.js 结束 *******************************/ </script> <script language="javascript"> function init() { //注册可拖拽表格 new DragedTable("tableId"); } </script> </HEAD> <BODY oncontextmenu="return false;" onload="init()"> <TABLE id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0"> <TR> <TH colspan="4" style="">拖动交换单元格内容</TH> </TR> <TR> <TD>Java</TD> <TD>Java One </TD> <TD>JBuilder</TD> <TD>Stuts</TD> </TR> <TR> <TD>C++</TD> <TD>Visual Studio</TD> <TD>Office</TD> <TD>Windows</TD> </TR> <TR> <TD>PhotoShop</TD> <TD>Java</TD> <TD>Illustrator</TD> <TD>PageMaker</TD> </TR> <TR> <TD>Cartoon</TD> <TD>Telephone</TD> <TD>China</TD> <TD>USA</TD> </TR> <TR> <TD>Java</TD> <TD>Java One </TD> <TD>JBuilder</TD> <TD>Stuts</TD> </TR> <TR> <TD>C++</TD> <TD>Visual Studio</TD> <TD>Office</TD> <TD>Windows</TD> </TR> <TR> <TD>PhotoShop</TD> <TD>Flash</TD> <TD>Illustrator</TD> <TD>PageMaker</TD> </TR> <TR> <TD>Cartoon</TD> <TD>Telephone</TD> <TD>China</TD> <TD>USA</TD> </TR> </TABLE> </BODY> </HTML> 友情提醒:发贴要结贴 iuhxq(小灰) 的代码很适用顶 对iuhxq(小灰) 的代码自己吃了编,感觉还可以,不过代码好像局限在页面的操作,只实现起行为,很难和后台互交,在项目中用处不大.... 对上面的话修正........页面效果归页面效果,后台归后台....和后台实现的方法很多..近来用了进学的ajax asp.net网站发布后无法连接sql2005数据库,调试的时候可以,没有找到原因,请帮忙,谢谢 疑问:网站首页数据如何管理 在GridView中如何使用CheckBox控件 删除图片时出错 当窗口关闭时,如何获得一个窗口内变量的值?? SQL两个表如何进行合并 asp.net 页面中打印输出json报错,新手求救啊 那为大哥大姐有ASP.NET C# +SQL2000数据库 留言板源码给我一份好吗? 问一个简单的问题!我是新手。 思归等这位大侠,快来呀!!! asp.net 中的session丢失问题 关于datalist
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>拖动</TITLE>
<STYLE>
td{width:20%;height:20px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;}
div{font-size:13px;}
th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;background-color:#CCCCCC}
table{border:1px solid black;font-size:13px;}
</STYLE>
<script language="javascript">
/************************************ dragedTableData.js *******************************/
/************************************ dragedTableData.js *******************************/
/*
* created by LxcJie 2004.4.12
* 可以实现表格内容的内部拖动
* 确保中间过度层的存在,id为指定
*/ /*--------全局变量-----------*/
var dragedTable_x0,dragedTable_y0,dragedTable_x1,dragedTable_y1;
var dragedTable_movable = false;
var dragedTable_preCell = null;
var dragedTable_normalColor = null;
//起始单元格的颜色
var dragedTable_preColor = "lavender";
//目标单元格的颜色
var dragedTable_endColor = "#FFCCFF";
var dragedTable_movedDiv = "dragedTable_movedDiv";
var dragedTable_tableId = "";
/*--------全局变量-----------*/ function DragedTable(tableId)
{
dragedTable_tableId = tableId;
var oTempDiv = document.createElement("div");
oTempDiv.id = dragedTable_movedDiv;
oTempDiv.onselectstart = function(){return false};
oTempDiv.style.cursor = "hand";
oTempDiv.style.position = "absolute";
oTempDiv.style.border = "1px solid black";
oTempDiv.style.backgroundColor = dragedTable_endColor;
oTempDiv.style.display = "none";
document.body.appendChild(oTempDiv);
document.all(tableId).onmousedown = showDiv;
} //得到控件的绝对位置
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;
} //显示图层
function showDiv()
{
var obj = event.srcElement;
var pos = new Array();
//获取过度图层
var oDiv = document.all(dragedTable_movedDiv);
if(obj.tagName.toLowerCase() == "td")
{
obj.style.cursor = "hand";
pos = getPos(obj);
//计算中间过度层位置,赋值
oDiv.style.width = obj.offsetWidth;
oDiv.style.height = obj.offsetHeight;
oDiv.style.top = pos[0];
oDiv.style.left = pos[1];
oDiv.innerHTML = obj.innerHTML;
oDiv.style.display = "";
dragedTable_x0 = pos[1];
dragedTable_y0 = pos[0];
dragedTable_x1 = event.clientX;
dragedTable_y1 = event.clientY;
//记住原td
dragedTable_normalColor = obj.style.backgroundColor;
obj.style.backgroundColor = dragedTable_preColor;
dragedTable_preCell = obj; dragedTable_movable = true;
}
}
function dragDiv()
{
if(dragedTable_movable)
{
var oDiv = document.all(dragedTable_movedDiv);
var pos = new Array();
oDiv.style.top = event.clientY - dragedTable_y1 + dragedTable_y0;
oDiv.style.left = event.clientX - dragedTable_x1 + dragedTable_x0;
var oTable = document.all(dragedTable_tableId);
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] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_endColor;
}
else
{
if(oTable.cells[i] != dragedTable_preCell)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
}
}
}
}
} function hideDiv()
{
if(dragedTable_movable)
{
var oTable = document.all(dragedTable_tableId);
var pos = new Array();
if(dragedTable_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")
{
//交换文本
dragedTable_preCell.innerHTML = oTable.cells[i].innerHTML;
oTable.cells[i].innerHTML = document.all(dragedTable_movedDiv).innerHTML;
//清除原单元格和目标单元格的样式
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
oTable.cells[i].style.cursor = "";
dragedTable_preCell.style.cursor = "";
dragedTable_preCell.style.backgroundColor = dragedTable_normalColor;
}
}
}
}
dragedTable_movable = false;
//清除提示图层
document.all(dragedTable_movedDiv).style.display = "none";
}
} document.onmouseup = function()
{
hideDiv();
var oTable = document.all(dragedTable_tableId);
for(var i=0; i<oTable.cells.length; i++)
oTable.cells[i].style.backgroundColor = dragedTable_normalColor;
} document.onmousemove = function()
{
dragDiv();
} /************************************ dragedTableData.js 结束 *******************************/
/************************************ dragedTableData.js 结束 *******************************/
</script>
<script language="javascript">
function init()
{
//注册可拖拽表格
new DragedTable("tableId");
}
</script>
</HEAD>
<BODY oncontextmenu="return false;" onload="init()">
<TABLE id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0">
<TR>
<TH colspan="4" style="">拖动交换单元格内容</TH>
</TR>
<TR>
<TD>Java</TD>
<TD>Java One </TD>
<TD>JBuilder</TD>
<TD>Stuts</TD>
</TR>
<TR>
<TD>C++</TD>
<TD>Visual Studio</TD>
<TD>Office</TD>
<TD>Windows</TD>
</TR>
<TR>
<TD>PhotoShop</TD>
<TD>Java</TD>
<TD>Illustrator</TD>
<TD>PageMaker</TD>
</TR>
<TR>
<TD>Cartoon</TD>
<TD>Telephone</TD>
<TD>China</TD>
<TD>USA</TD>
</TR>
<TR>
<TD>Java</TD>
<TD>Java One </TD>
<TD>JBuilder</TD>
<TD>Stuts</TD>
</TR>
<TR>
<TD>C++</TD>
<TD>Visual Studio</TD>
<TD>Office</TD>
<TD>Windows</TD>
</TR>
<TR>
<TD>PhotoShop</TD>
<TD>Flash</TD>
<TD>Illustrator</TD>
<TD>PageMaker</TD>
</TR>
<TR>
<TD>Cartoon</TD>
<TD>Telephone</TD>
<TD>China</TD>
<TD>USA</TD>
</TR>
</TABLE>
</BODY>
</HTML> 友情提醒:发贴要结贴
顶
近来用了进学的ajax