求"可对前台页面中table的行或列进行拖曳的代码?"

SkyeyGarden 2006-04-19 03:19:00
支持对选中的单行/列或多相进行相互间的拖曳..............
...全文
212 22 打赏 收藏 转发到动态 举报
写回复
用AI写文章
22 条回复
切换为时间正序
请发表友善的回复…
发表回复
SkyeyGarden 2006-05-23
  • 打赏
  • 举报
 回复
对上面的话修正........页面效果归页面效果,后台归后台....和后台实现的方法很多..
近来用了进学的ajax
wopos 2006-04-21
  • 打赏
  • 举报
 回复
up
SkyeyGarden 2006-04-21
  • 打赏
  • 举报
 回复
??
SkyeyGarden 2006-04-21
  • 打赏
  • 举报
 回复
对iuhxq(小灰) 的代码自己吃了编,感觉还可以,不过代码好像局限在页面的操作,只实现起行为,很难和后台互交,在项目中用处不大....
cansum396 2006-04-21
  • 打赏
  • 举报
 回复
make
变成熊猫你就老实了是不 2006-04-21
  • 打赏
  • 举报
 回复
顶了
xiedan79 2006-04-21
  • 打赏
  • 举报
 回复
完全可以，我同事就实现了
kokubo_wing 2006-04-20
  • 打赏
  • 举报
 回复
iuhxq(小灰) 的代码很适用
顶
SkyeyGarden 2006-04-20
  • 打赏
  • 举报
 回复
up
SkyeyGarden 2006-04-20
  • 打赏
  • 举报
 回复
不知谁还有相关的js代码，不够分可以加，过两天就结贴！
eqh 2006-04-20
  • 打赏
  • 举报
 回复
学习了！～
SkyeyGarden 2006-04-20
  • 打赏
  • 举报
 回复
怎么对更改后的数据保存？
flyinging 2006-04-19
  • 打赏
  • 举报
 回复
牛
njuzgj 2006-04-19
  • 打赏
  • 举报
 回复
牛,学习
iuhxq 2006-04-19
  • 打赏
  • 举报
 回复
<!-- 欢迎转载,请保留作者及其出处,谢谢 -->
<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>



友情提醒：发贴要结贴
kwork 2006-04-19
  • 打赏
  • 举报
 回复
不难吧，可以参看http://www.google.com/ig 的代码，俺就在本地实现了。
mytail001 2006-04-19
  • 打赏
  • 举报
 回复
还能这样的啊，关注中
SkyeyGarden 2006-04-19
  • 打赏
  • 举报
 回复
????
nimeide1234567890 2006-04-19
  • 打赏
  • 举报
 回复
ding
荣之梦 2006-04-19
  • 打赏
  • 举报
 回复
学习
加载更多回复（1）
jQuery实现table 列-拖曳排序
今天因项目需要，table 列-拖曳排序，在巨人的肩膀上，自己做了个小小的demo，与众分享。如图所示，目的是能将所有列随意排序。后台代码 就是为了传送数据到前台展示。 @RequestMapping(value = "/propertiesSort", ...
企业网站项目
前台使用repeater进行展示，（其实repeater就是其他ADO控件的源代码底层形式） 后台使用listView进行管理 2. 母版页中的控件都弄成server（runat="server") 3.一个元素一个div进行管理，使用div和table相结合的方式...
ExtJS专题-表格面板(1)
ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。但很多人在应用的时候都会因为遇到一些细节问题而苦恼，为什么提示信息出不来呀？为什么s.gif图片在...
EXTJS动态树的实现举例
一、描述：通过dwr实现JS与后台的交互，从而实现动态树中叶子节点和目录节点的增加和编辑、以及节点的拖曳，节点的增删和拖曳都会改变自身以及它所在的目录节点下的相关节点的序号，能使得后台与前台同步。...
【艾琪出品】《计算机应用基础》【试题汇总1】
自备留用 大连理工大学-大工20春...3. Word 2010 在文档的操作过程中,如果出现误操作后,可以使用“()”功能来修补不小心进行的误操作。 A 最小化 B 撤消键入 C 粘贴 D 关闭 4. 通常情况下,下列选项中不能启动Word 201
.NET社区

62,046

社区成员

669,048

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章